Regarding Semantics
Written June 25, 2009. 13 comments.
Semantics (n) The meaning, or an interpretation of the meaning, of a word. Now that’s out of the way, what do semantics mean in modern web design? Depending on who you ask you could get a varied response, but if anything is certain it’s that the concept of semantic mark-up isn’t difficult to grasp.
Note: This article is about semantic mark-up, not the semantic web (which will allegedly be web 3.0), although the latter is dependant on the former. The semantic web is a topic suitable for another day, but you can read more on that subject here, or something a little more digestible here. Let’s continue.
When referring to a web document, semantics is about the meaning of any given element and how said element describes what it contains. Any web designer who practices keeping presentation separate from the content (with CSS) probably already constructs their web documents in a semantic fashion or very close, even if they are unaware.
I like to describe semantics as “using the right tool for the right job” although I’m sure there’s a better analogy out there. But before I go deeper into that, check out these two different sets of mark-up.
Designer A: Non-semantic
<h4>Important heading</h4>
Pod Bay is decompressed. All doors are secure.
<br />
<br />
<h2>Less important heading</h2>
You are free to open pod bay doors.<br />
<br />
<a href="pod.html">Pod</a>
<br />
<a href="bay.html">Bay</a>
<br />
<a href="doors.html">Doors</a>The first example by Designer A (which curiously looks like something I would have done during the .com boom era) is a typical throwback to design practices of yesteryear, when designers would use html elements to try and control the presentation. Designer A didn’t like the big ugly size of an H1 and wanted something smaller, so he has used an H4 instead. He has then used an H2 for emphasis, because it’s physically bigger than an H4.
In the next part Designer A has used double <br /> to separate paragraphs because he likes the line-height it offers. And finally the navigation items are separated by single <br /> to give the appearance of a vertical list.
This structure is called non-semantic, or meaningless. The key point to note here is that mark-up should never be used for presentational purposes. The internet gods gave us CSS for that purpose.
Designer B: Semantically correct
<h1>Important heading</h1>
<p>Pod Bay is decompressed. All doors are secure.</p>
<h2>Less important heading</h2>
<p>You are free to open pod bay doors.</p>
<ul>
<li><a href="pod.html">Pod</a></li>
<li><a href="bay.html">Bay</a></li>
<li><a href="doors.html">Doors</a></li>
</ul>Designer B has done the right thing by giving the mark-up meaning. A heading should be a heading, and the most important heading should always be an H1. Sub-headings will run in consecutive order, H2, H3 etc. Paragraphs should be placed in P tags, and a list should be placed in an ordered or unordered (OL or UL) list.
If you’re following what I mean you’ve probably already figured out what one of the most historically abused HTML elements was (and sadly sometimes still is) when talking about non-semantic code. Did someone say tables?
Tables are a textbook example of everything that was wrong with web design. Have you ever stopped to think about why we don’t use them for layout (besides the fact they’re more difficult to manage)? We are now more aware that semantically speaking tables are the wrong element for the job. Tables are only meant for one thing only – tabular data. And if you’re using tables for your layout then everything inside them is semantically meaningless.
The significance of the content should dictate what element you use
Absorb that again: The significance of the content should dictate what element to use. Just to reiterate Designers B’s example, the meaning is simple. If you’re dealing with the most important title on a page, it should be contained in an H1. If it’s a less important heading, then put it in an H2. If you’re quoting some content, it belongs in a blockquote. When you’re specifying an address, use the address element. If you’ve got a list of items, put them in a UL or OL. You get the idea.
Does it matter?
The value of this answer will depend on you. For one thing, semantics make things a heck of a lot easier for screen readers, or more specifically the people relying on screen readers to get around a web site. But if you believe some of the articles out there, then by keeping our mark-up semantic we are preparing our sites for web 3.0 and improved machine/device understanding.
Whatever the result, it’s obvious semantics are important to keeping your mark-up clean, structured and meaningful.
Now go get ‘em.
Start of pageWho is That Web Guy?
Michael is a veteran web designer / developer / usability evangelist, practitioner of W3C guidelines, and currently head of the web dev unit at Stormbox, a branding and creative communications agency located in Perth, Western Australia.
Thanks for the awesome information you keep sharing.
How the hell did you make effect of text being “yellow marked” when selected ?
Great! Thank you ;)