How HTML5 element names were decided, by @leemunroe

19th of April 2011

I had the pleasure of attending a talk by Chris Mills, creator of the Opera Web Standards Curriculum, which was organised by those Standardistas fellas and Build. Chris was talking about HTML5 and one of the things I found interesting was the research behind how the HTML5 element names came about.

Google research

Google looked at something like a billion web pages and measured what ID and class names were used the most.

The results looked like this:

footer
menu
title
small
text
content
header
nav
copyright
button

See the full results here.

Look familiar?

Opera research

Opera then conducted their own research too, which came up with similar results.

Classes

footer
menu
style1
msonormal
text

Full class results here.

IDs

footer
content
header
logo
container

Full ID results here.

And that’s how HTML5 element names were decided

As you can see the new HTML5 element names were decided based on the most commonly used IDs and classes that web designers were already using.

Both ‘main’ and ‘content’ are the obvious omissions. I’m not 100% behind the reasoning for this but I guess ‘section’ and ‘article’ work better semantically for the main content areas.

Good to see ‘msonormal’ didn’t creep in there.

5 Appreciated Comments

On the 28th of April 2011, Karsten Huehn said:

The main problem with HTML5, I believe, is that the tags have gone from too general in XHTML to too specific. Other than mainstream news media sites, I can’t think of too many web sites I have worked on that I wished for an tag, or or . An appropriate block or inline element, such as or , always worked just fine and could be identified with an appropriate id or class. And adding and for one particular implementation is rather short-sighted. What happens if Ruby falls out of favour and is replaced by something else… at least and have recognisable purposes, albeit deprecated ones.

On the 1st of May 2011, Luke said:

There is a bit of a large jump before your conclusion there… Sure this explains “header” and “footer”, although these have been long-used terms for both online and print media. You do not explain the “section”, “article” or “aside” tags, nor numerous others.