Published in Web Development on Friday, March 19th, 2004
Via Tanketism in Anne Van Kesteren's weblog, I found Absolute Lists: Alternatives to Divs.
In summary, the author suggests replacing your <div>s for lists, and then taming your lists with CSS, and states
This article discusses how to get rid of div elements altogether, and step into a world of pure semantics utilizing only lists for an entire page.
Now, why would we do this?
Lets look at these individually.
Now, from what the specs say about lists one could argue that the information contained in an html document is, if anything, "Ordered information".
However, one look at example 1 from the article and its source code and it becomes obvious that this is just not semantically good.
A header and then it's content on the next list item? In a nested unordered list no less? I feel like I'm heading back to tables!
Even if one could work out a sematically valid way of presenting this information (perhaps the header and it's subsequent content held within the same <li></li> pair), do we need it?
Clearly something has been overlooked here, and part of what is missing can be found by reading Grouping elements: the DIV and SPAN elements from the W3C specs. <div>s and <spans>s can be used for grouping elements in the document body.
So now it begs the question: Is there something confusing to user-agents about the sequence of our documents?
The specs say it all and there's no reason to read further than the section about headings:
A heading element briefly describes the topic of the section it introduces.
No list required, when we venture to the next topic, we can use a header.
As far as the order is concerned, right to left, top to bottom:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
In summary, there is no need to mark up traditional documents as lists. Using <div>s to group (and style) common pieces of content is the correct way to do such a thing.
Using headings and presenting content contained between headings from one logical thought to another takes care of the order of our document.
Sitepoint's web devlopment books have helped me out on many occasions both for finding a quick solution to a problem but also to level out my knowlegde in weaker areas (JavaScript, I'm looking at you!). I am recommending the following titles from my bookshelf:
I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.
The author line-up for this book says it all. 7 excellent developers show you how to get your JavaScript coding up to speed with 7 chapters of great theory, code and examples. Metaprogramming with JavaScript (chapter 5 from Dan Webb) really helped me iron out some things I was missing about JavaScript. That said each chapter really helped me to develop my JavaScript skills beyond simple Ajax calls and html insertion with libs like JQuery.
Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..
Comments and Feedback
I still stand by original comment on Anne's site and yes when using JAWS it does indeed become a hideous mess if you nest heading elements within lists.
I also later got a message from Tommy saying he looked more closely at the WCAG and it does indeed say headings aren't supposed to be used within lists like that.
Thanks Robert, nice to know.
Ben de Groot also posted about this topic on his weblog. See listitis.