UPDATE:
This page have moved to my new blog. Please update your links.
DIV based layouts have enhanced the design structure of websites and have brought a more standardized method to our craft. Using DIVs and CSS for web layouts have allowed developers to use XHTML tags (such as tables) for their initial purpose. However, the DIV tag holds no meaning to older browsers and therefore does not aid in the hierarchy or visual structure of a site viewed with browsers lacking CSS support. XHTML list elements, with the aid of CSS, provide the same structural functionality as the DIV but, in my opinion, with a greater inherent hierarchy and syntactical meaning.
There have been numerous examples of lists being used as layout items. The premise of this method is to use CSS to make unordered lists and definition lists work in the same structural manner as a DIV. The reason why the DIV degrades nicely with older browsers is that older browsers do not know what it is and it is therefore omitted. Thus, the DIV, while causing no negative effects to the structure of a website, is providing no positive effects either. XHTML list elements provide a natural hierarchy for all layouts, with or without CSS. Two basic CSS rules are needed for lists to function like DIV tags. The rest of the CSS follows the same methodologies traditionally used for CSS layouts.
In the end, you have a slim piece of XHTML which arguably degrades more gracefully than DIV based layouts. The natural hierarchy of your website remains intact — without any additional hacks. This method has been successfully tested on Firefox, IE6 and 5.5, and Safari. I used a blog format to test this idea since the layout is fairly basic, yet contains all the basic elements used to make CSS/XHTML layouts. Click the links to view demos of an unordered list layout and a definition list layout.
Many have questioned whether using lists in this method is semantically correct. After many long discussions, I have come to the opinion that the final answer lies in what one considers to be a list.
W3Schools defines an unordered list as:
An unordered list is a list of items.
This is definition is very open to conjecture. If one was to make an outline of the informational components of a web page, it's fairly easy to see how it could be broken down in a list manner.
This list can be flushed out further to show sub-facets of each element:
To use a list to outline elements of a website makes perfect sense. The question is, does it make sense to use those very same tags to create the visual structure of a site. Semantically, there's nothing in the definition of an unordered list to say it isn't technically correct. In my opinion, it all comes down whether you're willing to look at the meaning and use of lists as well as the organization and structure of information in a relatively non-traditional manner.
A stripped down version of average website today created with the DIV tag would look something like the example below:
<div id="page">
<div id="header">
</div>
<div id="main">
</div>
<div id="sidecol">
</div>
<div id="footer">
</div>
</div>
The list based method replaces the DIV tags with a list structure. As seen below, there is already a much clearer hierarchy of each section of the layout.
<ul id="page">
<li id="header">
</li>
<li id="main">
</li>
<li id="sidecol">
</li>
<li id="footer">
</li>
</ul>
The UL tag acts as the replacement for the main DIV. Nested DIV tags are replaced with LIs. Viewing the list based layout without CSS shows the site degrades nicely and yet keeps its hierarchy and organization. Another type of list that could be used for this method is the definition list. Here is an example using definition lists:
<dl id="page">
<dt></dt>
<dd id="header">
</dd>
<dt></dt>
<dd id="main">
<dl>
<dt></dt>
<dd>
</dd>
</dl>
</dd>
<dt></dt>
<dd id="sidecol">
<dl>
<dt>/dt>
<dd>
</dd>
</dl>
</dd>
<dt></dt>
<dd id="footer">
</dd>
</dl>
There is a little more nesting than with unordered lists. However, the tags are even more relevant since they separate content between title (DT) and subject matter (DD). For those with a keen eye for markup, you may notice some extra DL tags that do not seem to be needed. In most cases, that most likely is true. However, since the goal is to have the same functionality as DIVs for layout creation, the nested DL is needed to contain both the title and the data for maximum flexibility. This setup shines when you view the page without CSS.
The CSS to implement this will not go down in history as a breakthrough technology. There have been plenty of articles written on how to use lists for purposes other than to list out items. Here are the most important rules.
ul {
list style:none none;
}
dl,dd,dt,ul {
margin:0;
padding:0;
}
There are a couple other tricks that make this method even nicer for older browsers. Visual treatment of an object can speak volumes for its intended purpose. Without that placement/color/scale, the object quickly becomes generic and vague. Therefore, a simple label that is hidden with CSS and therefore visible without makes all the difference.
.identifier {
display:none;
}
By added the identifier class to your DT or an H2 in your LI, you have added a clear label for browsers without CSS support. If you look at the styled demo and then go to the unstyled demo, you will notice additional headers in the latter. These additions insure extra clarity and usability for all browsers. There are times when you are going to want your lists to actually display like lists with CSS enabled. As you saw in the rules above, all lists (both unordered and definition) default to operate at layout items. A simple class rule will allow specified lists to render as bulleted items:
.list {
list style:disc inside;
margin left:5px;
}
Each method has strengths and weaknesses. Unordered lists need less code to provide the same functionality, but the LI tag is somewhat deficient in meaning. Unordered lists really were never designed for this sort of information, but, in my opinion, are much more meaningful tag to use (especially without CSS enabled) than DIVs. Definition lists provide a nice hierarchy in terms of what is a title and what is normal data. The page is much more clear for browsers without CSS support. One major weakness of using definition lists is that the DT tag cannot have any other block elements (H1, H2, etc) within it, elements that are highly important for SEO. While you may have more control over appearance with definition lists, you just need to decide which is more important to you. With a little time using list based layouts, I have come to believe that they can be easier to implement than DIV based layouts and obviously much easier than table based layouts.
Is this a method that renders the DIV tag obsolete? Of course not. I myself still haven't implemented this style of structuring on my own blog. This is rather an experiment in semantically structuring a website with more hierarchically meaningful tags. At the very least, I hope this is something that challenges traditional notions of how web sites can be put together. I've heard equal amounts of opinions from each side of the spectrum on this subject and I look forward to hearing more.
DIVless was thought up by P.J. Onori on a lazy weekend. Big thanks to David Nelson for some great feedback and suggestions.
DIVless is W3C friendly and was designed to give developers another method to create website layouts in a standards-friendly fashion.