So it was 1997 when a friend of a friend gave me a copy of html for dummies so I could learn how to make websites with the intention of securing a job that I am still currently employed in.  So it’s safe to say  I owe a fair bit to that book and to the simplisity of the html language. But like most people coming into the world of computer languages from another area, in my case it was art and design, I didn’t really understand why I was using this code to make pretty website layouts, I just followed the rules because that’s how it was done. In fact it wasn’t until 2005 that I really came to understand what it was I was doing with all these html tags. So for any designers who want to understand what html is and why it’s so important that it forms the foundations of your sexy website design, here’s my take on the basics of semantic html.

What is a Web Page?

As a front end web designer you build web pages and put simply a web page is a document displayed over the Internet. By document I mean any text based information. A document could be a poster, a box of toothpaste, a newspaper, a bank statement anything that communicates information by text and design.

Examples of documents

Click the images to enlarge

The problem with documents

If you take a look at the images above you’ll see some fairly familiar information communicated by text and design. Now it’s easy to read the information and understand it but there’s also a hell of a lot of stuff human beings understand that’s not communicated in the written language.

timeout shortlist the slickest city guide publishers the times
dubrovronik what is new what is on what is best sights and
sounds itineraries nightlife arts and leisure shopping eating
and drinking hotels

The paragraph above is the same textual information that is displayed on the cover of the Time Out guide that I scanned, but with the layout and formatting removed, it’s almost impossible to understand.  We take this area of communication for granted because we are so familiar with it, it’s literally second nature to us humans, but if you break it down there’s loads of stuff we are understanding without really thinking about. In the three scanned documents there a several company logos, product names, unordered lists, ordered lists, a definition list, sub headings, paragraphs, emphasized text, quotes, citations, urls, addresses and so on, and so forth. I’ve probably missed some stuff out because my brain is so powerful I understand this communication without even trying (that’s not just my brain by the way)

Humans 1 Computers 0

What we do with effortless ease, my relatively powerless CPU finds almost impossible,  buts that’s not surprising if you try to define how we understand the none textual information. Visually what makes a heading a heading, or a list a list. If we compare the hotel special offers flyer to the timeout travel book you can clearly see lists of information but they look completely different. We all probably recognize the Colgate logo, the Timeout logo because we know the companies and the the text is big and bold and near the top of the document  but I’m guessing you’ll be able to spot the company name on the hotel flyer, despite it not following any of those rules, even if you haven’t heard of the company.

Why do we need semantics html?

The simple answer to that question is we don’t. We understand a document just fine without it, that’s what I’ve been talking about throughout this post. The question should be; Why do computers need html? And the answer is again quite simple; computers are a bit thick! Well that’s not the whole story, a more accurate answer is your document (your webpage) will be delivered, on the internet through a whole load of technologies of varying “thickness”.
Firstly there are browsers Firefox, Internet Explorer, Safari, Crome, Opera they’re just the big 5 there are lots of others and several different versions of each. Then there are search engines, Google, Yahoo and Bing. Screen readers and operating systems also need to understand your document as well as programming languages like javascript and php. All these technologies, to a greater or lesser degree, need a simple way of understanding what your document is about, so with that you should understand the importance of writing good html.

html to the rescue

html stands for Hypertext markup laguage. Now hypertext just means we can traverse the web with none linear links eg from one page we can move to several different pages. Language, means exactly what you would expect. The important part is markup. Markup means to give meaning, so this language (html) gives meaning to your document, not so you can understand it but so that computer technologies can understand it. Without it your document is meaningless. So for a computer, html turns a confusing string of text into a meaningful document that can be universally understood, it can be indexed by search engines, displayed in browsers, converted to speech by screen readers, manipulated by other languages and can be the foundation for visually appealing websites.

An example of how you could markup the timeout book cover

<h1>Dubrovnik</h1>

<ul>

<li>What's new</li>

<li>what's </li>

<li>What's new</li>

</ul>

<h2>TimeOut</h2>

<blockquote>the slickest city guide publisher</blockqoute>

<cite>The Times</cite>

<ul>

<li>Sights and Sounds</li>

<li>Itineraries</li>

<li>Nightlife</li>

<li>Arts & Leisure</li>

<li>Shopping</li>

<li>Eating & Drinkink</li>

<li>Hotels</li>

</ul>

Further Reading

W3C html Tutorial

Web Semantics wiki

I have got a  design I’m working on right now and I was going to wait until it was finished before I started publishing stuff but then I stumbled across the Thematic theme. Thematic is just so simple and looks so good straigh off the bat I just had to use it. I’m going to make my first Thematic-child theme and use it for this site. Hopefully everything will run smoothly.