Menu

Semantic HTML 5? Pfft.

Reading though a preview of the HTML 5 specification over at A List Apart, I was somewhat surprised by the names chosen for two new HTML elements: header and footer. Like many other standards aware web designers I have worked hard to train myself out of the habit of naming divs non-semantically, only to discover that HTML 5 will undo all of my good work.

Let me explain what I mean.

Instead of naming a div based on where it appears within my layout, I try to name it based on the content it describes. For example, rather than markup a site’s header as:

<div id="header">

I mark it up as:

<div id="branding">

and instead of:

<div id="footer">

I choose:

<div id="siteinfo">

The idea is that in the absence of meaningful, semantic HTML elements with which to markup content I use the most descriptive CSS id name I can think of.

How ironic then, that the new HTML 5 header and footer elements describe content based on where it appears on the page, rather than what it means.

Update 08 Dec 2007: I thought it was worth mentioning that the branding/siteinfo naming structure isn’t one I came up with myself – it is suggested by Andy Clarke in his book Transcending CSS.

12 thoughts on “Semantic HTML 5? Pfft.”

Just a note to the reader who posted a comment from ‘plonker@you.com': Fake email address + insulting language = I delete your comment. Shame, because I’m sure other people would love to hear your point of view.

While I appreciate that you have your way of making things semantic and meaningful to you, but I have my ways as well. I would never think to name my header “branding” for I never use the word outside of talking about cattle. Whereas “header” and “footer” fits nicely with where I expect sections of my web page to reside.

Now, perhaps I don’t get it, but I do get my method and it works for me. Of course, that’s after 42 years of programming so I may be a little set in my ways.

@Tedd: I don’t think the proposed naming convention is necessarily bad – I certainly wouldn’t suggest my naming convention as an alternative! Like you say, my alternatives to header/footer make sense to me and the way I structure my pages, and wouldn’t necessarily be as meaningful to someone else.

(I didn’t actually make them up myself by the way – those are the names suggested by Andy Clarke in his book Transcending CSS)

What I find interesting is the to-and-fro of web design best practices. Andy Clarke and cohorts encourage us to make our markup semantic to the nth degree – advice I put to practice in my own work. While on the other hand the HTML 5 team seem to see no problem with describing content based on visual appearance (where it is likely to appear on the page).

I am curious to know if the new HTML elements will have a formatting bias as well. Will the new elements (header, footer, section, nav, aside) have some sort of default styles applied to them – will an aside be floated right, for instance, or will text in the footer be smaller than regular body copy?

I personally think its a good idea having footer etc. While the Clarke idea is interesting, I think it fails in one area and that is if anyone has to rework your code. I hate having to read and rework other peoples code because of the confusing div naming and I think using branding etc is too confusing.

@Jermayn – It’s a good point you make that markup re-usability be an important consideration. header and footer are two terms that are widely understood, so I realise I am playing the devils advocate by pointing out possible flaws with their semantic appropriateness.

Judging from reader’s comments I’m in the minority on this one – long live header and footer!