thoughts

[HTML] what div is about

2005-03-15 modified: 2005-07-19

Do you know what div is invented for? When I ask people, they generally come up with the definition by W3C:

The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents.

W3C: 7.5.4 Grouping elements: the DIV and SPAN elements

So people use div to structure their document, which is quite ok. In HTML 3.2 however div was defined a little different:

DIV elements can be used to structure HTML documents as a hierarchy of divisions.

W3C: HTML 3.2 REC: DIV and CENTER

Which in fact sounds quite the same, but now we're talking in terms of "divisions" and a hierarchical structure. A division is in fact an chapter or subchapter and generally consists of a heading, several paragraphs, lists, tables and other block level elements, everything that makes up a chapter. Consider the following markup structure:

<div>
  <h1>
  <p>
  <p>
  <ul>
  <div>
    <h2>
    <p>
    <p>
  </div>
</div>

That makes sense doesn't it? This is the primary application for div, too bad almost nobody uses it this way.

So should you all drop the structural use of div like navigational structures or clusters of elements? Of course not, but bear in mind that this is a different use of div than when we use it for chapter clustering. Therefore I suggest to add a class="structural" to those structural instances. Both types of application are not the same, so this should reflect in a the class attribute.

Note for Dutch readers: the term "paragraph" (<p>) is best translated by alinea. On the other hand, "section" or "division" (<div>) is best translated by paragraaf.

Conclusion

Please keep using div for clustering data, but also use it to cluster chapters and subchapters, like in the example above. Consider adding a different class to structural instances. Do not use them for everything.

Update 2005-04-03

The HTML 4.01 specification also mentions this:

The following example shows how to use the DIV element to associate a heading with the document section that follows it. Doing so allows you to define a style for the section (color the background, set the font, etc.) with style sheets.
<DIV class="section" id="forest-elephants" >
<H1>Forest elephants</H1>
<P>In this section, we discuss the lesser known forest elephants.
...this section continues...

<DIV class="subsection" id="forest-habitat" >
<H2>Habitat</H2>
<P>Forest elephants do not live in trees but among them.
...this subsection continues...
</DIV>
</DIV>
W3C: 7.5.5 Headings: The H1, H2, H3, H4, H5, H6 elements

I think the classnames for the div's here are redundant, only use them in case you really need them (when you find out IE does not support the CSS div>div selector).

Also note that the semantics of div are about to be changed in XHTML 2.0, and this kind of structuring will be done with the section element. But since the world is not even ready for XHTML 1.1 yet, please let's stick to HTML 4.01.

Additional resources (top 15)

Below is a list of additional resources that might contain extra information about the subject at hand. These are all sites linking to this one (i.e. backtracking).

thoughts

[HTML] what div is about

Conclusion

Update 2005-04-03

Further reading

Additional resources (top 15)

comment