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.

Does The IMG Tag Need A Fullsize Attribute?

Drew Wilson is proposing the HTML IMG tag get a new attribute called fullsize. The fullsize attribute would reference “a larger (or fullsize) version of the SRC image. Browsers could then include native support to display the fullsize image in a [modal] pop-up.” according to, Wilson’s site dedicated to the effort. Mr. Wilson has even gone to the trouble of creating a jQuery plug-in that simulates how the behavior would work. He hopes the Internet will make enough buzz about it to get the attention of the W3C in order to get the fullsize attribute included in the official HTML spec. As of this writing, the petition to add a fullsize attribute has 185 “signatures”. I am not one of them.

Drew Wilson is proposing the W3C add a new attribute to the IMG tag called fullsize.

I’m not against the idea of including a reference to a larger version of an image right inside the tag. HTML is all about structuring and describing content, and the fullsize attribute is just another piece of meta-data. My biggest problem is this is already possible today by wrapping a link pointing to the fullsize image around the original image. Is it sexy? No. But it is still flexible. It can be customized and jazzed up with JavaScript and CSS but for devices that don’t support those technologies, a link around an image would still be accessible.

What I’m weary wary about is letting the browser manufacturers determine the default pop-up behavior and then relying on them for easier customization options. Take drop down input elements for example. Getting these to look consistent across all of the different browsers and operating systems in the world today is impossible. Roger Johansson went through the effort and documented them on his blog Any saved time from browsers handling a pop-up would be wasted trying to work around the different limitations for each browser.

To summarize:

  • I’m all for a fullsize attribute for meta-data purposes
  • Browsers handling the pop-up functionality will do more harm than good