The Div Tag Loses Its Crown

The Div Tag Loses Its Crown

Today, when you build a layout, or simply look at the source code of any website you will probably see the <div> tag used more than any other entity.  Until recently, the tag has simply been the "king" of tag-land. It's been the best way to contain design elements.  

Div's are just that: containers. They contain, and allow you to manipulate your websites layout through the use of class and ID names. Until now, the tag has been king of the castle. Well, the problem is, website layouts are inefficient when compared to what's coming soon; and what's coming is the power HTML5.

Soon, HTML5 tags will eliminate the need for many <div> tags. The new HTML5 tags layout more semantically when compared to the typical <div> tag. The new HTML5 tags are easy to digest for new generation, browsers, search engines, and screen readers. They can read and make better sense of HTML5, plus HTML5 gives us the ability to create "smarter" or more categorized markup.

So What's New About It?

HTML5 provides new tags to wrap content in a more useful manner, including a tag dedicated toward the site's main navigation to specify the header and footer of your page. WHY is this so important? Can't I still use the <div> tag? The answer is "yes," however, it will become best practice to use the new HTML5 tags, due to the fact that HTML5 provides better ways and names to divide content.

The new HTML5 tags are important for a few different reasons. Take for instance, SEO friendliness. HTML5  tags let search engines know what the most important elements are on the page. For example, it will look at

at the main source of content on a page, and based upon that, better index the main content of your site.

Next, new generation browsers (Firefox 4, Chrome, Safari, IE9) are able to make better sense of HTML5-powered web pages with the elements to outline and guide the page design. 

Another reason semantic tags are better: Accessibility. People requiring screen readers will be big fans of semantic tags. Accessing main content and main navigation will be faster and easier, as semantic tags allow for better markup.  the screen reader can find it much easier and quicker. Oftentimes, the differences lie beneath the surface, and HTML5 will provide a major step toward improved accessibility.

The <div> May Give Up the Throne But It's Here To Stay.

No need to shed a tear just yet, the <div> is still a necessary tag for websites. There is still plenty of content that needs to be contained, yet doesn't necessarily fit into HTML5 semantic tags. That, and for now, the fact that we do not have HTML5 elements across all our browsers, nor will we for some time, forces us to continue to employ the <div> as our main container.


<li>About Us</li>

<article> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque libero est, vestibulum ac mollis sit amet, euismod nec ligula. Morbi placerat libero ac lectus hendrerit sit amet pretium nisi convallis. Integer egestas dictum tellus, vitae scelerisque urna euismod eu. Aliquam erat volutpat. Donec elementum tortor eu tellus tempor malesuada. Integer felis odio, tempor eu rhoncus non, condimentum et arcu. Vestibulum eget leo justo, eget vehicula tortor. Curabitur volutpat felis nec quam sagittis pellentesque. </article>

There's So Much More...

Like the dethroning of the

tag, there are some great elements coming in HTML5 that are going to make all of our lives a little easier, making websites easier to code, while improving SEO and UX.  This article only touches on a few improvements coming with HTML5 sematic tags. See more on the World Wide Web Consortium, here: W3C

You'll find some great HTML5 tutorials on or O'Reilly, and live training on HTML5 at the 2011 CMS Expo Learning and Business Conference, May 2-4, 2011. 

Author Josh Miller is Lead Developer and Partner at Crew Design Group, a U.S.-based design firm and CMS agency. Get to know Josh atCMS Expo, May 2, 3, 4, 2011.