In the first article in this series, Content before Design, I discussed the approach to take when building sites structured in accordance to their raw content as opposed to their presentation. In part 2, I’ll be looking at how to use semantic markup and which XHTML elements are best used for different types of content.

What is semantics?

I used to naively believe that semantic markup was just clean, well-formed HTML with divs and uls instead of tables. I thought it was a term I could throw at clients and such to look clever. But although semantic markup is so much more, it is in essence very simple. Semantic markup is that which conveys meaning and the purpose of the content it contains. So, headings should be correctly wrapped in <h*> tags, unordered lists in <ul> tags and so on.

Semantics is meaning.

Well, ‘that’s just plain common sense’ you may be thinking. And of course you’re right! But regardless, the majority of websites are built so solidly around their design as opposed to content – you’d be amazed how many times obvious lists are created in paragraphs with line-breaks instead of in individual <li> tags. Or take this very site for example – the header logo is simply an image, no <h1> tag – although it’s obviously the top level heading.

“I will be fixing this elementary issues on the next redesign, I feel it’s good for the purpose of writing such articles to be able to point out my own mistakes.”

Making meaning

HTML provides us with around 40 tags to markup different types of content. This may have been dandy 15 years ago, but in light of the web’s immense expansion and the superfluity of different forms of media and content websites present – 40 tags looks rather slim. The result of this is 2-fold, either:

• designers look to alternative methods, such as microformats, to help expand the capabilities of their markup.
• designers are forced to use irrelevant HTML tags to contain and present content they weren’t originally intended for.

So, in some cases it’s 1 step forward, but in others it’s practically 2 steps back.

The easiest way to write semantic markup is to build sites with a content-out approach, as discussed in part 1 of this series. By writing your XHTML in a logical content order – you will automatically create the correct elements to represent the content of your site instead of the design.

Why is this important?

Well, not to bore you with the old accessibility argument but let’s not forget that websites are, in their rawest forms, conveyors of content to the user. Sure, we use CSS to make them look darn pretty and then we pop in a bit of client-side scripting or Flash to make them sparkle – but there’s a large portion of your visitors that won’t reap the benefits of all that time spent in Photoshop and writing lines of funny symbols.

Writing meaningful markup helps to group different content types correctly. When styles are disabled, or when your site is being parsed by non-visual devices, this will help to keep everything together and in order. However, it also aids styling to no end, and can also make it easier to associate elements and content types with scripting to easily control the dynamic and visual effects of entire blocks of content without having to assign various classes and ids to every item.

In the following example I have changed my current footer navigation markup into semantic, meaningful HTML that can now be styled more easily than when each footer link was independent of every other:

What’s better about it?

• Firstly, I’ve removed the useless <div> and marked up the internal contents (the list of links) in an unordered list.
• I’ve then replaced the <div> id with a more meaningful <ul> id. This will mean some CSS amends to transpose the styles.
• Doing this gives me more stylistic control over the elements with less code, but also means that without styles, the content will still make sense.

Simple eh? That’s the point! Creating semantic markup shouldn’t be an exceptional skill, it really is just a combination of a good knowledge of HTML and common sense. The new footer markup above is actually easy to control with CSS and will now appear far more coherently when viewed without styles.

Using the correct elements

It’s important to consider carefully which elements to use when marking up content. This can reduce bloated code in files, make CSS styling easier, aid dynamic control, make it easier to aggregate data to different sites and apps, and most importantly ensure that the content makes sense when all styles and scripts are off.

A few examples of incorrect uses of HTML:

BAD:

<p>This is a paragraph of information.<br /><br />This is the second paragraph of even more information…</p>

GOOD:

<p>This is a pararaph of information.</p> <p>This is the second paragraph of even more information…</p>

Ok that’s fairly obvious. What about when incorrect elements are used for styling before the true nature of the content has been considered:

BAD:

<span>”Knowledge speaks, wisdom listens.”</span>
<br />
<strong>Jimi Hendrix</strong>

GOOD:

<blockquote>
<p>Knowledge speaks, wisdom listens.</p>
<p><cite>Jimi Hendrix</cite></p>
</blockquote>

And one more chunky example for good measure:

BAD:

<strong>PHOTOSHOP FOR BEGINNERS</strong>
<p>Photoshop is a design package by Adobe that allows you to create and manipulate images and photography. Some of things you can do with Photoshop include:
<br /><br />
<strong>Cropping, rotating and resizing images.</strong><br />
<strong>Changing the lighting, brightness, contrast, hue and saturation of images.</strong>
<strong>Create shapes and objects and apply gradients and shadows.</strong>

GOOD:

<h1>Photoshop for beginners</h1>
<p>Photoshop is a design package by Adobe that allows you to create and manipulate images and photography. Some of things you can do with Photoshop include:</p>
<ul>
<li>Cropping, rotating and resizing images.</li>
<li>Changing the lighting, brightness, contrast, hue and saturation of images.</li>
<li>Create shapes and objects and apply gradients and shadows.</li>
</ul>

Marking up with Microformats

Microformats are a set of open data format standards to help create and ease web content publishing and transferring. They are designed to more appropriately label groups of data, such as an address or business card information. They are an extension of XHTML that open up a lot of opportunities with only the slightest bit of code. No new languages to learn, no complex scripting.

Microformats extend the potential of the traditional 40 (or so) HTML elements such as blockquotes, paragraphs and lists and enable us to describe and markup our content in even greater detail. They also allow us to markup content so it can easily be aggregated by other sources through XML, RSS and other technologies.

Now unfortunately I’m going to stop there before I embark upon another tangent on Microformats. They are most certainly a subject for another day, considering I’ve recently got the bible on Microformats for Christmas and it’s going to take a while to get through. So for now, please pop over to the Microformats website for lots and lots of more information!

Take a step back

Well, that about covers that for now. In the past 2 articles we’ve looked at designing from the ground up. Considering content first before fancy graphics and snazzy AJAX and Flash and looking at how to markup our XHTML correctly and semantically. In the 3rd part in this series I’ll be entering the deep realms of progressive enhancement, but until then I’d like to hear your opinions and views, so feel free to comment away!