In most online resources on CSS, you see a recurring theme: "Don't bloat your HTML with DIVs." For those of you who may not be familiar with the concept (please don't tell me you're still using tables!), DIVs are generic block elements which can be used to create hooks for styling your HTML document. So what is wrong with DIVs?

First of all, let's take a look at how the WWW Consortium defines the DIV element:

The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.

Okay, if you did't catch it I specifically mean this part: "Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes." As far as I can see, the DIV (and SPAN) element was introduced to help page designers (and authors) to manipulate the HTML using stylesheets.

So, why are people talking against the use of DIVs and SPANs?

Semantically, DIVs and SPANs are meaningless. That is, unlike elements like <p> that are used to mark up the semantic structure of an HTML document, the <div> tag has no semantics. It's just a generic block element and cannot carry any other meaning than "Hi, I'm just a block, ignore me". If the implementation of a browser that relies on semantics of a page (like aural browsers and screen readers) is correct, it will just ignore a DIV and go on with its life. But is the lack of meaning the reason for not using DIVs?

Since a <div> carries no meaning, it doesn't help you much when reading raw HTML. They may bloat your code quickly and make the 'real' content hard to read. In other words, it can become a nightmarish experience for HTML maintainer. Is that why people say you don't want to use too much DIVs?

A <div> is a generic block element. Since it's generic, it means that whatever you can do with it, you can also do with other block elements. So, it is usually possible to achieve the same result without DIVs. It's even recommended to do so, and I absolutely support that recommendation. But is that the reason to avoid DIVs?

The answer to the above questions, as far as I'm concerned, is simply no. By all means, use as many DIVs as you think you need. DIVs are meant to be 'abused' by page designers. And unless you are not a page designer (or implementor), there is absolutely nothing wrong with using DIVs. There are some problems with using too many DIVs, and we'll take a look at how to solve them.

Solving the problem of DIV bloat

Did you really think I'd cut down on DIVs? Oh, come on! DIVs are fun! ;) The real problem is not the number of DIVs. It's not knowing what they do.

There is a very simple solution to most problems arising from the abuse of DIV elements and the diminished maintainability of the HTML code. Thankfully, you won't be looking at HTML too much in development, but when you come back to it later on, you'd still appreciate it if the code was readable. In order to solve the problem, you will be very clever about the usage of class and id.

Let's take a look at an example. You want a box with drop shadow. The way you'd do it is you'd cut the box's background image into three parts: top, middle, and bottom. Then you'd create three equal-sized block elements one on top of another, and give each on of the images as a background image. The markup for that would look something like this:

<div>
    <div>
        <div>
             <!-- CONTENT -->
        </div>
    </div>
</div>

Now imagine a whole series of, say, 5 or 8 such boxes, and you'll get a good picture of what unmaintainable code is. Let's tweak the above code to make it both useful and readable.

<div id="sidebar" class="dropshadowed part-middle">
    <div class="dropshadowed part-top">
        <div class="dropshadowed part-bottom">
             <!-- CONTENT -->
        </div>
    </div>
</div>

Later on, say after a year, you'd be able to figure out that this box is a sidebar, that it's dropshadowed, and that the three DIVs are middle, top and bottom parts respectively. It's not a bad idea to be as explicit as possible. On the other hand, if you want t save your fingers, you could come up with a naming scheme, but you should also take into account the possibility of you later changing your mind and using a different scheme. In that case, consider adding comments. Or you could put the comment in the CSS. Or both.

<!-- Three-part box with drop shadow -->
<div id="page-sbar" class="vis-ds p-mid">
    <div class="vis-ds p-top">
        <div class="vis-ds p-bot">
             <!-- CONTENT -->
        </div>
    </div>
</div>

How to use other block and inline elements

Okay, so we now see it's perfectly fine to use DIVs. However, you don't always need to. Sometimes you can make use of existing elements, and save yourself a lot of typing (which is the only valid case against DIVs that I can think of). Let's say that you have a list of menu items tha are to be styled in a way similar to the above box (dropshadow with three-part layout).

Since every menu item is put into a LI element, you can use it as the outer container (the first DIV). The LI element contains an anchor (A) element. What we'd do is wrap the anchor element in a paragraph tag. That's semantically correct, and you now have a total of three elements you can use.

<!-- Three-part box with drop shadow -->
<li id="page-sbar" class="vis-ds p-mid">
    <p class="vis-ds p-top">
        <a class="vis-ds p-bot">
             <!-- CONTENT -->
        </a>
    </p>
</li>

So in order to use the anchor tag as a DIV, you need to make it act as a block element. You can do that by simply setting display property to block in your stylesheet. Now you have three block elements inside one another, and that's exactly the same thing as the DIV'd box in the previous example. Here's the part of the stylesheet that deals with making the A element a block element:

#page-sbar a {
    display: block;
}

Have it your way, then

Regardless of the possibility to use any block element the way you'd use a DIV, it's important to use whatever method you find correct (or easy, or whatever). The way you think about the markup is more important than the way other people think about it.

For example, some people have suggested using a DIVless design, and they replaced DIVs with DT and DD tags. Those are used for dictionary terms and dictionary definitions respectively, and they are hardly semantically correct outside that scope. The authors of the so-called DIVless method have buster their asses to justify such deviation, but I remain unconvinced. DIV, being defined as a "generic" block element used for styling your document is, for me, a more semantically correct approach then using a dictionary term for something that is not a dictionary.

But if you do feel a dictionary term is appropriate, you should use it, because the code that's in line with the way you think is code you'll understand when you come back to it later.