Divitis: What it is and How to Avoid it

by Megan McDermott, 15 September 2007 - 2:20am

When they start designing with CSS instead of tables, many web designers fall into the same trap. Instead of putting tables around everything on a page, they use divs instead. The underlying design practices remain largely unchanged. This article will explain the problems with these habits and propose some practical solutions.

What is a Div?

A div is an HTML tag used to contain sections of an HTML document that go together. Div actually stands for division. You can use it to break your HTML document into parts such as a header, a content section, a sidebar, and a footer. This not only semantically groups items together, but also allows you to define their presentation using CSS.

What is Divitis?

Divitis refers to the over-use of the div tag for purposes other than dividing a page into meaningful sections. These uses include:

• wrapping every object on the page with a div whether it requires one or not
• manipulating page structure to accomplish specific visual goals
• using a div tag to mark-up items that don't seem to match any other HTML element

The end result is a document full of nested div tags reminicent of the old method of nesting tables.

This practice stems from a misunderstanding of the purpose of the div tag. Many web designers seem to think of it as an all-purpose tag. They use it to solve display problems and accompolish specific visual goals often because of a lack of understanding of HTML and CSS selectors. (Admittedly, there are some issues, specifically cross-browser display problems, that can only be solved with an additional container div.)

It also comes from a misunderstanding of what CSS layouts really are. Some approach a switch to CSS as being similar to tables, except that you just replace table cells with divs. This is incorrect. When done properly, a CSS-based layout replaces the table structure with a semantically marked-up HTML document and moves all of the visual presentation to CSS.

(I should mention that "CSS layout" is a bit of a misnomer. CSS is being used to control the layout only, while the document structure is done with simple HTML. The tables are replaced with semantic HTML for structure with CSS setting the appearance.)

Why is Div-itis bad?

There are a few reasons:

• It partly elminates one of the key reasons for moving to a CSS-based layout: separating presentation from structure. The structure is no longer purely semantic. Additional divs, that are not serving any logical purpose, have been applied.
• It makes the document more complex and more difficult to style using CSS.
• The code becomes more difficult to read and mistakes become more common.

How to Avoid it

There are a number of coding strategies you can use to cut down on extra divs. They include:

1. Make full use of available HTML tags. Think about the semantics of the document you are designing. What is that navigation menu? It's a list mark it up as one. What is that bit of instruction text? It's not really a paragraph but that's the closest HTML tag available. It's definitely not a division. (For more help on understnading semantic mark-up I highly recommend Andy Clarke's Transcending CSS).

2. Consider whether a container div is really necessary. In some cases we add a div out of habit, or an assumption that it is needed to access the inner contents using CSS. For example, we may have a navigation menu that looks like this:

   <div id="nav">
         <ul>
           <li>list item 1</li>
           <li>list item 2</li>
           <li>list item 3</li>
            ... etc ...
        </ul>
   </div>       

   However, that div isn't really needed. You could just as easily do this:

   <ul id="nav">
           <li>list item 1</li>
           <li>list item 2</li>
           <li>list item 3</li>
           ... etc ...
   </ul>

   The menu would then be styled using ul#nav instead of div#nav ul.

   You can also apply more than one class to a div rather than putting in an extra div to apply a second class. Instead of this:

   <div class="figure">
        <div class="align-left">
          <img src="image.gif" height="xx" 
                   width="yy" alt="the image description" />
        <p>This is the caption</p>
      </div>
   </div>

   You could do this:

   <div class="figure align-left">
      <img src="image.gif" height="xx" 
                width="yy" alt="the image description" />
      <p>This is the caption</p>
   </div>

3. Make full use of CSS selectors. You don't always need a containing div with a speicfic class or ID in order to apply CSS effects to certain elements. For example, you may have a content section like this:

   <div id="content">
      <h1>This is the title</h1>
      <h2>This is the sub-title</h2>
      <div id="article">
          <p>This is the body of the article</p>
          <p>There may be several paragraphs here 
               that you need to style with CSS</p>
       </div>
   </div>

   CSS:

   #article {font-size: .9em;}

   In this case you use CSS to target the #article div and apply text formatting there. Instead, you could remove the #article div and use descendent selectors to find all the paragraphs in the content div:

   <div id="content">
      <h1>This is the title</h1>
      <h2>This is the sub-title</h2>
   	
      <p>This is the body of the article</p>
      <p>There may be several paragraphs here that you 
               need to style with CSS</p>
   </div>

   CSS:

   #content p {font-size: .9em;}

4. Reconsider your browser support standards. In Transcending CSS, Andy Clarke also points out that it may not be necessary to provide the same design experience to all browsers (p. 52-53). In fact, it may be fine if the layout doesn't look exactly the same in every browser. Is it really necessary to add that container div so everything lines up perfectly in Internet Explorer 6? Perhaps not.

5. Reconsider your design choices. This is a tough one but it's worth thinking about. Some design effects, such as scale-able rounded corners, are impossible to do without some extra divs and spans. Is it worth creating a long-term maintenance mess to get those rounded corners?

Looking Ahead to HTML 5 and CSS 3

New developments in HTML 5 will help to reduce the need for extra divs even more. In fact, they are even proposing to add a new tag called section, in order to reduce the over-use of divs we're discussing here. The current proposal also includes new tags for <header>, <footer>, and <navigation>. The <figure> element would elminate the need to use a div to group an image and a caption, as we did above.

CSS 3 is also offering new tools for designers that would reduce the need for extra mark-up. For example, creating rounded corners in a flexible layout currently requires a lot of extra divs and spans to ensure that the box can expand to fit the content. The new border-radius property would elminiate the need for this.

Read more about new elements HTML 5 and CSS 3.

Discussion

To discuss, ask questions or comment on this article please see the Webmaster Forums discussion on Div-itis.

Resources

• Transcending CSS by Andy Clarke
• 456 Berea Street series on CSS 2.1 selectors: Part 1, Part 2, Part 3, and an article on CSS 3 selectors
• New elements in HTML 5
• CSS.info: a blog about CSS 3