Semantics, not a fun subject, in fact, it can be very boring and bordering on pointless if you get too deep into it. However, it does play an important part
in various aspect of making web pages.

Semantics, in the context of web design, relates to making sure your using the right tag for the right job. It means using an h1 tag for a main heading, using lists for, surprise surprise, lists of things, using tables for tabular data etc…

In the last couple days (bearing in mind today is 31st August 2003) there appear to have been a few discussions on semantics and writing valid markup. An article at Mezzoblue entitled Semantics and Bad Code is probably the best I have read about it. In essence, the issue has been, that writing valid XHTML1.1 strict doesn’t necessarily mean your using the right tags, for the right purpose, in the right place (semantically correct).

You can have perfectly valid code but be semantically wrong. This site (generally) conforms to at least XHTML1.0 Transitional, I know if you go an validate every page there will be some quirks, but on the whole it validates other than a few slip ups, and a lot of it validates to Strict as well. However, I know it isn’t all semantically correct. Until recently the nav bar on the left wasn’t in a list, the titles at the top were just in stylised div’s. There are several more thing I could probably pick out but haven’t got round to yet. I’ve been too busy setting the site up to be mostly PHP includes for the precise reason that I’ll be able to make changes, like improving semantics, on the whole site relatively easily. (The sites clearly now running in Wordpress, so a lot of it’s handled for me, I’ve just tweaked the template, still, the same issues apply)

I imagine some of you will be wondering WHY we bother about semantic code and that it’s just a case of coding geeks being precious over how its done. After all, whether you use an h1 tag or a div styled in the same way, it will look the same visually.

Not quite so. Think of the different platforms your web page can be viewed on. Of course you have the ’standard’ viewing portals, Internet Explorer, Netscape, Opera, Safari and the like on Windows and Mac machines. What about handheld PDA’s? Or Screen Readers used by visually impaired people?

Screen Readers and accessibility are possibly the main reasons for writing semantic code. Do you still write for NN4.x browsers? Do you also write code that is accessible to visually impaired users? (not the only impaired surfers, but the main group affected by the web) I’m betting in many cases, those that code for NN4 don’t code for accessibility. So even if you page looks spanking in every browser under the sun, a person using a screen reader finds your site a nightmare to navigate and therefore won’t spend any money.

Speaking of NN4, there’s a funny thing with combining XHTML/CSS and semantic code. You can actually get some good results with NN4. By using lists for nav bars (you know, that LIST of links!), when CSS is a problem and turned off or not supported, the links will be displayed in a nicely bulleted list. Whereas, you could argue that using tables for layout isn’t a good idea, as older browsers don’t support them. However, they will be able to see a div or something with a nice list of links.

Anyway, back to screen readers and semantics, if you use a <div> styled to make the text look like a heading, when the screen reader gets to it, it doesn’t know its anything special, after all, its only in a standard <div>. But, if you used an <h1> tag instead, styled in the same way that your div would have been, the screen reader gets to it and sees it actually quite an important heading, and therefore emphasises it appropriately.

Again, if CSS isn’t supported or disabled, if you’d used a <div> the text will look like the rest of the content. An <h1> will still be prominent and clearly identifiable.

Semantic code is another important part of your code, whether you look at it from the point of view of making your code semantically correct, or nicely accessible is up to you. Personally, my interest in it is related to the benefits it has from an accessibility point of view.

One final point, as I’ve said, writing valid code doesn’t mean its anything like semantically correct. I do believe however, that if you start using XHTML and CSS, you do get led into writing more semantically than before. There may be more to do than converting to XHTML, but it’s a good step in the right direction.