Jero.net

Seperating style from structure

As we all know, the table element should't be used for styling your document. The div element should be used instead, together with the id and class attribute to style it with CSS, just like the HTML 4.01 and XHTML 1.0 specs tells us to do. But aren't we polluting our markup with these div elements, because we're only using them for presentational purposes?

First, let's take a look at an example. Here's the HTML code of the top of previous layout:

<div id="logo">
 <h1>Jero.net</h1>
 <hr>
</div>

As you see, I wrapped the site name and a hr element inside a div element. But the div element has absolutely no purpose in my document instead of having the id attribute and using CSS to style it. So by using divs, you don't separate presentation from structure at all, nor does it have any semantic value, just like the font and center elements.

One might argue that the div element can be used to divide the document into sections. If this were true, the div would have a real purpose. Unfortunately, it isn't. Just take a look at what the HTML 4.01 specification says about the 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.

Ok, the spec does talk about adding structure, but that's actually quite vague, don't you think? What kind of structure do they mean!? Because the W3C didn't give any real information on how the div element can give structure to a document that can also be understood by user agents, "adding structure" is actually not possible because no-one understands how it is structurized. The only possible way to do so is by using the id attrubute, but the value of this attribute can only be understood by humans, not user agents. Therefore, it's still impossible to give structure to a document by using the div element so the only reason to use the element is to group certain elements together in order to style them (or give it a lang like the quoted piece from the HTML 4.01 spec says, but who uses the attribute anyway!?).

So should we just ditch the div element? I guess not. You should, but it would be impossible to make a decent layout at the moment. Which I, as a web designer, enjoy looking at. Another reason would be because we don't have any alternatives. Well, not yet. Just take a look at the header element, introduced by HTML, or XHTML 2's role attribute. By using either one of the methods instead of the div element from my previous example at the beginning of this article, that section will actually have a meaning. In other words, the document will become semantically richer.