HTML 5 and reserved class names

Warning This article was written over six months ago, and may contain outdated information.

I’ve been doing a bit of thinking recently.

I’ve been thinking about HTML 5 and the new semantic sectioning elements it proposes to introduce: header, footer, section, article, nav and aside.

I’ve also been thinking about the way microformats use data format standards and reserved class and id values to organise content.

Then thinking about this 2005 research into reused class names, which shows that, probably mostly unconsciously, website makers were already using the proposed HTML 5 elements as class names to organise their data.

And then thinking: we should make this a de facto standard. So I have; in the last few weeks I’ve begun to mark up the websites I make using reserved class names based on the HTML 5 elements. Some were no-brainers – who doesn’t use <div class=”header”>? – but marking up sections with <div class=”section” id=”section_name”> is new for me.

It makes a lot of sense, however; first of all, it will make it easier for me to review my code in the future; second, it will help me get used to the conventions of marking up in that way; and third, when (if) HTML 5 becomes a recommendation and supported in browsers, it will be a matter of seconds to do find+replace on my code to change <div class=”section”> to <section>.

I don’t imagine we’ll see the proposed HTML 5 changes for a few years yet, so marking up your content with HTML 5 class names is a good way to keep ahead of the curve.

2 comments on
“HTML 5 and reserved class names”

  1. I don’t see why using the class-names and id-values… It isn’t very strict (I can also use another class-name, and my code is still 100% valid). Reserved class-names and id-values: ok, but not for very structural elements within the page.

    For now, I really recommend using the element names from the future HTML5 as a class-name or id-value (depending on what kind of element).

  2. Good post. I think this is the way forward. I also think it would be good if there were some place that we could reach a consensus on some class-name-conventions, such as the use of ‘search’, ‘button’, ‘price’, etc. Then if these get used widely then maybe they will be considered for the html5 spec.

    DAZ