Elliot Jay Stocks

Pedantic Semantics

Written at 10am on 05.09.06
Filed under Web Design / That Internet Thing / ALL CATEGORIES
2 comments (closed)

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.

2 comments (closed)

Comments are currently closed on this entry, but you can still read those that have already been posted...

• Hallvord R. M. Steen

  23.11.06

  

  #

  Semantics is also in the eye of the beholder though. Your classname is probably going to be an English word that is going to mean something to you (beyond describing a particular feature of the layout since that’s not pedantic enough for you :-) ) but wouldn’t mean much to my mother even if she read the source. Unless you go towards microformats, the semantics you get with class=”” don’t go very far. (Well, with Opera you could always provide a User JavaScript to your visitors that would attach behaviour to your chosen semantic class names and thus encourage other webmasters to join in using those :-) )

  Case in point: click here

  - are the terms “Category” and “Published” ;-)

• Elliot Jay Stocks

  23.11.06

  

  #

  Hey Hallvord,

  It’s a pleasure to get a comment from you!

  You’re absolutely right - taking it to the extreme level, the very use of the English language in class / ID names is a form of non-semantic markup… but then that is really extreme, and perhaps impossible to avoid all the while code for the web operates in a language so intrinsically tied to daily usage.

  Thanks for running the Semantic Data Extractor test on this site; once again you’re absolutely right and I’m ashamed to admit that the mark-up on this site doesn’t really conform to what I was saying in my post; a) because most of the mark-up is thanks to a Wordpress template I’ve been meaning to bury for a long time, and b) because it’s only recently I’ve become that pedantic! ;-)

  I guess that makes me a bit of a hypocrite… another reason I desperately need to roll out the new version of this site!