The misunderstood ‘DIV’
Posted on Saturday, June 28th, 2008
In my opinion the most misunderstood HTML element is probably the DIV. It’s perfectly okay to use it; I’ve never created a website without using it at least once, but some people use it incorrectly. I’m normally not annoyed about this at all but it recently got to the point when I thought, "hmmm, maybe I should write a blog post about the DIV to show people how sad and frustrated I am about it’s misuse…" 
The DIV element is supposed to define a section or division within an HTML document, but because anything in an HTML document can be thought of as a "section" or "division" some people have taken it to mean that the DIV should be used everywhere and for everything… even if it’s not needed just stick a couple of DIVs in there and maybe a use will be found for them later. Okay, well I doubt people actually do that but I’ve got to say, after looking through and reviewing quite a few sites this particular element has become increasingly dominant. - People are using it to code their navigation menus, to divide chunks of text, for headings and even as empty elements to act as separators or borders.
I could rant about the various misuses of the element throughout this entire post but that’s not useful to anyone so instead I’ll show you how you could code a website and then I’ll show you how you should.
How you could code a typical website: (PLEASE DON’T)
<body> <div id="container"> <div id="page-heading">HEADING</div> <div id="navigation"> <div class="nav-item">Linky</div> <div class="nav-item">Linky</div> <div class="nav-item">Linky</div> <div class="nav-item">Linky</div> <div class="nav-item">Linky</div> <div class="nav-item">Linky</div> <div class="nav-item">Linky</div> </div> <div id="article-heading">ANOTHER HEADING</div> <div id="content"> <div class="para">Hello, this is some content</div> <div class="para">Another 'paragraph'</div> <div class="para">Another chunk of text...</div> </div> <div class="image"> <div class="image-second-border"> <img /> </div> </div> <div id="footer"> <div id="footer-inner"> <div id="footer-text">COPYRIGHT INFO</div> </div> </div> </div> </body>
How you should code a typical website:
<body> <div id="container"> <h1>HEADING</h1> <ul id="navigation"> <li><a href="#">Linky</a></li> <li><a href="#">Linky</a></li> <li><a href="#">Linky</a></li> <li><a href="#">Linky</a></li> <li><a href="#">Linky</a></li> </ul> <h2>ANOTHER HEADING</h2> <p>Hello, this is some content</p> <p>Another 'paragraph'</p> <p>Another chunk of text...</p> <img class="dark-border" src="#" alt="hmmm..." /> <div id="foot"> <p>COPYRIGHT INFO</p> </div> </div> </body>
So, as you can see, the difference is pretty clear. The first version is horrific; not only is the use of the DIV incorrect but there are tonnes of unnecessary ID and CLASS decelerations. The second version shows the way in which you should code; it is much cleaner, more semantic, less bloated and most importantly more accessible to those users who rely on various aid equipment to read websites.
I have no problem with using the DIV, and as you can see I’ve used it a couple of times on the second version but that’s okay because it is probably the most semantic way to code that particular content. Coding semantically means using the correct elements for your content. If there’s a heading then put it inside an h1,h2 or h3 (etc.) element, not inside a DIV, and if there’s a paragraph then for goodness’ sake, use the paragraph (<p>) element!
I’ve coded the menu as an unordered list - This is the right way to do it. You could similarily use an ordered list but order is not always relevant within a navigation menu. Make sure that you don’t overuse classes or IDs - they’re not always necessary.
Sometimes, for styling purposes it’s necessary to use more DIVs than you usually would, but just make sure that while doing this you’re not sacrificing accessibility. Technically everything to do with style and decoration should be handled in the stylesheet and you shouldn’t have to adjust your HTML at all, but obviously sometimes it becomes necessary…
Just to be clear, I’m not just having a go at the DIV element; I am trying to get across the point that you should always code semantically, appropriately and in accordance with the content. In doing this your websites will be more accessible, your code will be more lightweight and will be nicer to look at!
Additionally, coding semantically means search engines won’t have so much trouble in understanding the structure of your content (seperating headings from paragraphs etc.) and so you’ll have a better chance of being ranked accordingly.
Hopefully we won’t have to resort to DIVs in the future with new HTML/XHTML specifications on the way… Although I don’t think that’ll be for a while.
June 28th, 2008 at 2:40 pm
A big mistake that I’ve seen is when people wrap ul navigation menus in divs. There is absolutely no need to do this. A ul can be styled in the same way that a div can.
Great post.
June 28th, 2008 at 9:55 pm
There are situations when you do need to wrap certain elements with a container div. Although try not to sometimes its just not possible with the way the browsers handle the current CSS versions.
June 28th, 2008 at 10:20 pm
Great post. I agree with Jeffrey, the UL is block level, just like the div.
June 29th, 2008 at 12:25 am
I’d just like to point out that all modern browsers (IE7+, FF, Safari, Opera) support the display: block;, display: inline; (and more recently display: inline-block;).
Great article, now on to the definition list!
June 29th, 2008 at 1:41 pm
@Jeffrey - I totally agree!!! - although, to be honest, when I started out I used a similiar technique!
Shame on me!
@Dan - Yeh I agree… Although we shouldn’t have to adjust the HTML for styling sometimes it is necessary…
@Damien, @CreativeNotice - Thanks!
June 29th, 2008 at 4:15 pm
A brilliant article. It’s unfortunate that in practise using the minimum amount of divs is very difficult. Web designers always need a few extra divs to add background images and to support IE.
Overusing IDs and classes is a much overlooked issue which I’m sure most web designers are guilty of (including me). I’m looking forward to the CSS3 selectors which currently only work using JQuery.
June 29th, 2008 at 7:14 pm
Great post, made for some pretty good reading. I’m guilty of using one too many classes myself…
June 29th, 2008 at 11:34 pm
Interesting read….my comment would be that you are telling people what you think is the ideal layout (less div’s which i do agree with) yet you are using a blog which is littered with what you say you should avoid.
June 30th, 2008 at 4:31 am
My name is Erika, and I’m a reformed div-aholic. Not only did I wrap everything in divs, but I wrapped block elements in divs. LOL.
Now, I’m getting better, and I’ve limited my use of divs to cross-browser related issues. Well, sort of. LOL.
June 30th, 2008 at 7:46 am
use less divs… use more tables… yeahhhhh…
jk jk.
thanks for that, that’s helpful… i used to make a div for every element, but now i’ll do it like you showed us.
June 30th, 2008 at 7:59 am
@Thomas - You’re absolutely right… The practices demonstrated here are the ideals - Obviously there are times when it’s not possible…
@Simon - I used to be the same lol
@Nodster - I knew someone was gonna call me on that… I suppose sometimes I am just lazy. One of the times when you shouldn’t use a
)
DIVbut end up doing it because it’s quicker is when you need to apply, for example, a padding-left to several consecutive elements - instead of applying it individually to each element it’s easier to wrap it in a div and then apply the padding to that… - This is was happened to me when creating this blog (I was a tad lazy) - plus I didn’t want to drown my stylesheets with “unnecessary” decelerations. btw Many of theDIVs on this blog are generated from blasted plugins! …grrrr lol (Oh Please don’t look at my personal site - it’s even worse because it was created back when I was in my web-dev infancy@Erika - I used to do exactly the same thing - in fact, if you look at my portfolio site (Created ages ago) you’ll see a sea of
DIVs! I’m glad you’re reformed!@KDR - Glad it helped!
June 30th, 2008 at 11:58 am
Just to clarify what I am trying to say in this post: Using DIVs is perfectly okay. It only becomes a problem when you are sacrificing accessibility as a result.
Technically there’s nothing wrong with using tonnes of DIVs, but if you were to code (for example) a nav menu using just DIVs instead of list markup then that would obviously be wrong!!! …
So just to be clear - please carry on using DIVs but make sure that you USE THEM APPROPRIATELY!
July 3rd, 2008 at 9:30 pm
I oftentimes find myself wrapping a DIV around elements that require styling which can’t be achieved with only one element (mostly for multiple background images). As browsers evolve and support for multiple background images, background image scaling, and rounded corners become mainstream, this will become unnecessary.
Great article, though. A common symptom of post-table-based layouts that Zeldman commonly refers to as “divitus”.
March 8th, 2009 at 5:22 pm
yeah ..More Div more headache less are they..
more control on css specificity..