Divitis: What it is and how to avoid it (Updated!)

When developing your website in HTML, you might be tempted to use the <div> tag to sovle problems. Things not lining up in every browser? Maybe another containing <div> would help. Don't know how to select that particular element? Wrap a <div> around it! Unfortunately this can lead to divitis: weighty, convoluted code that is slow to load and difficult to maintain.

This article will explain the problems with divitis habits and propose some practical solutions.

This is an updated version of an article originally published in 2007.

What is a Div?

A div is an HTML tag used to group sections of an HTML document. 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. 

For more detail, read our article on What is a Div?

What is Divitis?

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

  • wrapping elements in a div in order to insert class and/or id attributes for styling with CSS
  • 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 reminiscent 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 accomplish specific visual goals. This sometimes occurs because of a lack of understanding of HTML and CSS selectors. 

It also comes from a misunderstanding of what HTML is actually for. HTML is a structural mark-up language. It is meant to provide semantic (meaningful) structure to documents in the form of headers, lists, paragraphs, images, metadata, and other elements. It is not meant to be used for visual presentation. That is what CSS is for. This means that you should try to limit your HTML to the minimum elements necessary to define the structure of your document.

Why is Div-itis bad?

There are a few reasons:

  • It dilutes the separation of presentation from structure.
  • 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.
  • Non-semantic elements are meaningless to screen readers, search bots, feed readers, and other devices that may need to derive meaning from the content.
  • More code makes file sizes larger and slower to download.

How to Avoid it

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

  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, so 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 understanding semantic mark-up try 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 needed. You could do this instead:

    <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 #nav ul.

    You can also apply multiple classes to a single div instead of using 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>

    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;}

    Browser support for CSS selectors have progressed significantly over the past few years. Attribute selectors and pseudo-classes are now quite well supported among the major browsers. Check When can I use... to find out which browsers support a particular selector.

  4. Reconsider your browser support standards. It may not be necessary for your design to look exactly the same in every browser. Consider building in extras for browsers that support them rather than using hacky work-arounds (and extra divs), to get the look you want. This is the principle of progressive enhancement 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. Is it worth creating a long-term maintenance mess to get a specific look?

New developments in HTML 5

New semantic elements in HTML 5 will reduce the need for extra divs even more. The current working draft includes several new sectioning elements, including:

  • section - a generic section
  • nav - a navigation block
  • article - a "self-contained composition"; a piece of content (could be a blog post, an article, a forum topic etc.; could be viewed on its own page or with a selection of other articles).
  • aside - probably what you would think of as a sidebar; content that is "tangentially" related to the main content. Could be anything from a pull-quote to a sidebar containing navigation, advertising, related content, etc.

These four elements would be used to create the overall structure of your layout. The body element is also considered to be a section.

HTML 5 is also introducing several new block-level (or "flow") elements:

  • hgroup - groups several header elements (e.g. a main heading and a subtitle)
  • header - a group of headings, navigational aids, etc. belonging to a section (as listed above). This could belong to the overall document or to an individual article or section and there can be more than one on a page.
  • footer - contains information about the section it belongs to (e.g. author information, published date, copyright etc.). As with the header element, this can belong to the overall document or an individual section, and there can be more than one on a page.
  • figure - a self-contained group of content that can be referenced from the main content and may include a caption (using the new figcaption element). It sounds confusing, but this basically means that you can group an image and a caption together, and semantically reference it as a "figure". This eliminates the need to use a div to group an image and a caption, as we did above.

Currently, we would use divs for all of the above elements. In the specification for the<div> element, the W3C discourages its use:

Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.

The new sectioning and flow elements described above are clearly designed to make that possible. At this time many of the new elements are supported in most browsers, so it is possible to begin experimenting with them depending on your support requirements (IE 8 and below, of course, still lag behind).

For more on HTML 5, try HTML 5 Doctor.

New developments in CSS 3

In CSS 3, many new types of selectors are available. As mentioned above, making full use of CSS selectors will reduce the need for extra divs. CSS 3 selectors include:

  • Attribute selectors - select based on an element's attributes; includes the ability to match whole or partial words (e.g. attribute value starts with a given string).
  • Psudo-classes - in addition to the :link, :visited, :hover etc. pseudo-classes provided for links, CSS 3 defines a whole slew of other types of pseudo-classes. For example:
    • :first-child (the first child element)
    • :nth-child() (enables you do do a calculation to find every n elements in a series, or use keywords to find "even" and "odd" elements )
  • Pseudo-elements - these allow you to target pieces of content that aren't defined by their own structural mark-up. This differs from pseudo-classes, in that pseudo-classes target existing structural elements defined in the HTML code. Pseudo-elements in CSS 3 include:
    • ::first-line (the first line)
    • :: first letter (the first letter)

    With these elements you can probably imagine creating effects traditionally seen in printed books or magazines.

  • Combinators - these are ways of combining selectors to target particular examples. They include:
    • Child combinators, separated by > (e.g. body > p finds any paragraphs that are immediate children of the <body> tag)
    • Adjacent sibling, separated by + (e.g. h2 + p finds any paragraphs that immediately follow an h2 tag)
    • General sibling, separated by ~ (e.g. h2 ~ p finds any paragraphs that are siblings of an h2 tag)

Many of these are currently quite well supported, and can often be used instead of adding additional structural mark-up.

For a simplified explanation of CSS3 selectors, try  456 Berea Street's CSS 3 Selectors Explained. To find out which browsers support a particular selector, check When can I use.... For general information and updates on CSS 3, visit CSS3.info.

Discussion

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

Resources

Megan McDermott's picture

About the Author

Megan is co-founder and editor of A Padded Cell and administrator at The Webmaster Forums. She has been designing websites since 1997, with expertise in design, information architecture, usability, HTML/CSS, Drupal theming, and more. She is available for short-term or ongoing freelance work in any of those areas. Read her web design blog at MeganMcDermott.com or check out her portfolio.