I’m currently working on a site for Sanctuary Records USA, a build I took over from my predecessor. His high level of XHTML markup and CSS presentation is a joy to work with, and showcased such expertise that it actually taught me a thing or two. However, one area the markup falls down in is its use of non-semantic classes and IDs – ‘leftcol’, ‘rightcol’ and the like. By and large it’s fine (and there are certainly no such squint-inducing misdemeanors as span class=”greenText” , thank god), but it got me thinking about semantics and how far we – as web designers – should take them. More than anything else, it made me realise how seriously I now take semantic markup.

The level of pedanticness involved with markup varies from designer to designer, and I’ve found from my own experience and that of others that it often starts with the transition from tables to CSS-based layout. Using CSS to position content rather than just style text can trigger an understanding of separating form from content, and it’s usually not long before you’re fretting over correct paragraph indentations, covering up your old messy Javascript rollovers with CSS image replacements, and threatening to kill anyone using font tags. W3C validation is an almost certain obsession for anyone reaching this point.

But validation doesn’t (and – in its current state – can’t) examine the level of semantic correctness going on in our markup. The W3C have attempted to evaluate semantic markup with their Semantic Data Extractor tool, and, in the process, illustrate that “providing a semantically rich HTML gives much more value to your code: using a semantically rich HTML code allows a better use of CSS, [and] makes your HTML intelligible to a wider range of user agents (especially search engines bots),” but it’s currently unenforcable in their validation tool. So maybe something should change; if the W3C are fussy about killing target="_blank" in XHTML 1.0 strict, why are they letting semantics slip? Is it purely down to the validation technology’s current limitations?

As introduced above, some of the best designers and developers are still using ‘leftcol’ classes to identify a left-hand column and therefore failing to separate design from markup. It’s easy to do, because some site content areas (usually the main ones, like columns) seem to lend themselves to non-semantic names (because they seem so unlikely to change or be referred to as anything else), but if we’re going to get anal about this, it really is no better than span class=”greenText” , because you’re defining the look of something in a document that should be free of any kind of design. Ultimately, the one rule to permanently bear in mind is that an HTML file should be able to have its appearance changed at any time, simply by changing an external CSS file and leaving the markup untouched (the benefits of which are famously exemplified no better than at www.csszengarden.com).

Perhaps semantic markup should be enforced by the W3C and become a forced requirement of XHTML 2.0, but more importantly, if we designers care about doing things right enough to validate, perhaps we should care enough to enforce our own use of semantics.