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.”
Comments are closed.
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.
Hi:
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
@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
footeretc. 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.
headerandfooterare 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
headerandfooter!You giving up without a fight Jonathan???
It’s not a fight, but a discussion.
There’s no “right” answer, but answers that fit the needs.
Semantic means different things to different people.
@Tedd – I dont mean a ‘fight’ I mean is he going to give up on his point of view so easily. Sorry its an Australian saying, so sorry for any misunderstanding.
Hearing a different view is not giving up, but rather listening.
Cheers,
tedd
I totally agree with Jonathan. What if you decide not put your logo on top of your content, but right or left of it? You could put your branding markup, where ever you want:
Instead of doing stupid:
you could do:
page title
Thanks Jonathan. I was furious and dissapointed about the W3C’s HTML5 proposal, too, but too busy and angry to write about it. Thanks for pointing it out.
oops, my markup dissappeared :-)
so again:
bad markup:
header
h1
logo
SITE-title
/h1
/header
content
good markup:
h1 PAGE title /h1
content
branding logo /branding
The whole idea is bad, somehow the concept from XHTML2 was ignored, were you can have an additional attribute “role”, separated from the class and it’s association with the styling of the document.
(div class=”tbrdr2″ role=”Branding”) … (/div)
I still wish that HTML5 took more from XHTML2, which seems destined to be the great idea that has zero browser support, and were left with XHTML5 which seems to be just HTML5 with close tags.