Death To The Div

Every web developer is looking forward to the new HTML spec, HTML 5. The new spec will birth 20 new elements to add more underlying semantic meaning to content. The new elements came out of popular IDs and Class attributes for common situations in web design: <nav> is just like <div id=”nav”>. But these new elements are just a stop gap.

Death to the Div Tag

I wish the web community could move beyond pigeon-holing ourselves with specific elements. Why can’t we make our own elements to better describe our content? If I had my way <div>s would be ancient history and any element not already defined in the HTML spec would be treated by browsers like a <div>.

There are many benefits to opening up the element nomenclature like this.

1) It will be much easier to describe content. No longer will we need to shoehorn our content into quasi-relevant elements. Did you know the <address> tag is to define the contact information for the author or owner of a document and not to hold a plain street address?

2) No more div-itis. Web developers will no longer have to wade through a dozen </div> tags. <div> tags are the least-semantic structural elements in a web designers toolbox; it literally means ‘division’ of a page and is used to mark off different sections within a document. Things can get pretty messy when using too many <div>s however as it is hard to tell where they end. Take a look at this code example:

<div id="container">
   <div id="article">
     <div id="chart">

Look how much better this markup looks from both a readability and maintainability perspective:


A benefit to free-form elements is the semantic closing tags making it clear where each element begins and ends.

3) Microformats might actually work. The movement to create semantic markup using loosely agreed upon Classes slowly died off due to the extra bloat it introduced to the underlying code. With the ability to create your own tags, Microformats could flourish and we can begin to set-up our own best practices for describing content.

4) Faster JavaScript. Not many browsers support the JavaScript method getElementsByClassName but every browser supports getElementsByTagName. Because of this many libraries have had to write their own implementations which are many times slower than native methods. Faster DOM traversal = faster JavaScript!

What will it take to make this a reality? Boogers

We’re already going to have issues with older browsers supporting brand new elements with HTML 5. We might as well go all the way and make sure every browser can support whatever element we can come up with. After all we only have one shot to get HTML right for this generation according to John Allsopp.

Many browsers already support free-form elements both with CSS and JavaScript. To really flesh this out I created the Booger Test and below are my findings.

  • Firefox 3+ supports the <booger> tag as if it were a native element but has to be explicitly set to display:block.
  • Firefox 2 has no problem with CSS unless there children elements in which case the <booger> tag collapses. Weird!
  • All versions of Internet Explorer don’t know what to do with the <booger> tag but they do function normally when using a JavaScript shiv
  • Safari and Chrome have no problems.
  • Every browser I tested passed the JavaScript portions (getElementsByTagName(“booger”)) of the booger test with flying colors!

So as you can see, we are really close to being able to use our own elements. HTML 5 is already going in this direction but it would be a real shame if everyone got hung up on what frivolous new element names we should all agree to use instead of coming up with new functionality to move the capabilities of the web forward.

68 Responses to “ Death To The Div ”

  1. I wonder if a more feasible solution might just be to have a mode for html editors/viewers to display any <div> with an id/class a different way.

    For example:
    <div id=”article”>
    would show:

    <div class=”header”>
    would show

    I’m unsure how it would handle multiple ones of these, such as:
    <div id=”article” class=”centered”>

    For multiple classes
    <div class=”class1 class2″>
    This would be nice:

    But I’m afraid that might not work so well since period is valid in a CSS class name.

    This seems a suggestion that is actually doable since you can implement it on your own and it doesn’t really make any difference to the final generated source. Unfortunately, it loses some of your intended benefits, like being able to use getElementsByTagName and using the element names in CSS (though that last one isn’t so bad, since you can still use the pseudo-names in the CSS like #article and .header). You also have the downside that you can’t XPATH doesn’t understand an expression like “/body/#article/#section/.rightcolumn” so you’d have to write it out using all the divs or something like ‘/body/*[@id=”article”]/*[@id=”section”]/*[@class=”rightcolumn”]’ and that’s fairly nasty.

    Any takers? Or is it no longer worth the effort?


    JP responded on July 4th, 2010:

    Forgot to include – this wouldn’t just be a way for the html viewer/editor to display the source. You could also type in your code in the pseudo form and it would translate it behind the scenes.

  2. I think the problem is that there is so much information about DIVs and as a result so easy to learn. I found your post very interesting and will inform my members about this post!


  3. “it would be a real shame if everyone got hung up on what frivolous new element names we should all agree to use instead of coming up with new functionality to move the capabilities of the web forward.”

    Agreed 100% – what can I say, full support of custom elements across all browsers would be fantastic, and most certainly the way forward IMHO.

    Ioan – IDW


    Russell Heimlich responded on November 17th, 2010:

    We’re almost there. If we can just get IE to hop on board…

  4. Do you think its the death