KuraFire Network

Andy Clarke hurriedly posted an experiment on his way out (no, he's not leaving, just temporarily away from his own site. Don't worry, he's not jumping that bandwagon) on trying to create "a fluid/elastic XHTML layout with minimal markup, CSS2 and a sprinkling of DOM scripting magic." Now, I think it's a great thing to minimize markup and try out new approaches to creating modern websites, but you can overdo it.

Andy's approach was to get rid of all id and class attributes that were generally used in <div> elements to accomodate some styling. Next, he used CSS2 selectors to style and position those parts of the markup again, and relied on Javascript to help IE understand it all as well.

Why is this approach so bad?

First of all, relying on Javascript to make a layout work at all in Internet Explorer is risky, to say the least. Can you honestly justify to your customers that their site won't look one bit the same for users that have Javascript disabled? I know I can't.

But set aside the obtrusive Javascript requirement for style purposes (which contradicts the very nature of wanting to separate structure, presentation and behaviour). And set aside the need to use CSS2 selectors that are still not as widely supported as we'd like them to be. Lastly, set aside the vast redundancy in the produced CSS that this approach creates. He's removing id and class attributes, but why?

I've been striving recently to drastically reduce or remove <div> id or class names from my code with a view to including them only where necessary for Microformats.

Removing superfluous <div> elements that are used only for styling purposes is one thing, but removing id and class attributes is something else entirely, and it's not a good thing either.

Semantic value

I'm all in favor of keeping markup clear, but our end goal has been to create as semantically-rich as possible websites. That means, keep those id and class attributes in there, but use them properly. They have some semantic value, albeit very little:

The id attribute has several roles in HTML:

• As a style sheet selector.
• As a target anchor for hypertext links.
• As a means to reference a particular element from a script.
• As the name of a declared OBJECT element.
• For general purpose processing by user agents (e.g. for identifying fields when extracting data from HTML pages into a database, translating HTML documents into other formats, etc.).

However, as vague and unhelpful as the HTML specification may be on these attributes when it comes to identifying semantics, it doesn't take much to imagine semantic purposes for either of the attributes, so who are we to ignore these possible semantics? Isn't that what Microformats were invented for in the first place, to add more semantics to pages using currently existing elements and attributes?

How can you make your id and class attributes have meaning? By using them well, so think them through as best you can. Here are some examples:

• <ul id="menu">...</ul>
• <div id="header"><h1>My title</h1><p>A tagline of sorts</p></div>
• <p class="meta">...</p>
• <li class="comment">...</li>
• <div id="secondary"> ... </div>
• <p id="copyright">...</p>

Those are all great uses of the id and class attributes; each of them add some meaning to the content within. The fact that we use them primarily to style things differently doesn't mean they're presentational. Douglas Bowman explained in his (first) @media presentation how we should choose our id and class attribute values by their meaning, not their planned or expected visual appearance. That is taking the presentation away from our attributes' values, something you don't achieve by taking the attributes away themselves.

Bottom line is, if you choose your id and class attributes carefully and use them well, you're adding semantic richness to your pages and you're still doing a good job of separating structure and presentation. And all the while you're not relying on the behaviour layer to make things work in Internet Explorer. Isn't that just fabulous?

Discuss this article

Bookmark: Newsvine del.icio.us Digg