Semantic markup and the sea of divisions

By Martin / (X)HTML & CSS / Wednesday August 13th, 2008 / 2 comments

Many times I have heard people say "Don't use tables for layout, use divisions and CSS", or "I'm going to make my site using divs and CSS". While this is true, and you shouldn't use tables for many perfectly valid reasons, it must be kept in mind that there is more to HTML than the <div> tag.

Divisions are very useful when creating CSS-based designs because they are semantically neutral. This means that they have no meaning, and therefore can be used anywhere (where they are syntactically valid). However, a purely divisioned HTML document is a very un-semantic document.

Semantics is the meaning of your document - the ability of a human (or machine for that matter) to read the source code and understand the context of the information placed. For example, <h1> tags are for the main heading of your document, and <p> is for paragraphs, and while it is perfectly valid to put your paragraphs inside headings it would be semantically incorrect. In this way, putting all content regardless of context into divisions is also bad.

Writing semantic HTML is important, because it allows the meaning to be clearly conveyed. For example, when writing CSS, it is easy to define the style of a h1 and a p, instead of defining the styles for div.header and div.p.

Furthermore, semantic HTML allows independance of the document from its stylesheet, as its meaning can still be understood without styling. For example, if you wanted to emphasise some text you could use the <em> (emphasis) tag or a <span class="style1"> and styling. If the stylesheet was taken away, however, the <em> block would be still universally recognised through the DTD as emphasised text, whereas the span would lose its meaning. Of course, it is necessary to note that there are some cases in which you purely want to style the text for visual purposes without changing its meaning, in which case you should use a semantically-neutral element like <span> or <div>, instead of a presentational tag like <i>.

This is why it is important to not only use division tags when writing CSS-styled HTML documents, but to also mark up the different types of content semantically. Divisions are useful, but overuse leads to confusing and meaningless text.

<div>
    <h2>Do this</h2>
    <p class="body">
        Body body body body
        Body body body body
        <em>Emphasised body body body</em>
    </p>
</div>

<div>
    <div class="header-medium">But not this</div>
    <div class="body">
        Body body body body
        Body body body body
        <span class="style1">Emphasised body body body</span>
    </div>
</div>