Web Design and Semantic Change
Last year P.J. Onori wrote a very good article on XHTML structure design without DIVs. The general thesis of this article was to suggest an alternate method of page structuring, and furthermore ask the question why use the DIV tag? Imagine this is the structure of your page:
<div id="container"> <div id="header"> content here </div> <div id="content"> content here </div> <div id="footer"> content here </div> </div>
For a moment try and put aside all the methods you are familiar with practicing when producing your XHTML pages. Why not instead use lists to structure your page? Would it not be better semantic markup? Some people would argue that a page structure header->content->footer etc is semantically a list; a list of elements, or content areas. On the other hand others may favour the opposite in the opinion that it is not list data at all. Take a look at the latter code but in list format:
<ul id="container"> <li id="header"> content here </li> <li id="content"> content here </li> <li id="footer"> content here </li> </ul>
Embedded DIVs of course are not a problem as XHTML happily accepts embedded lists in the same fashion:
<ul id="container"> <li id="header"> content here </li> <li id="content"> <ul> <li id="column1"> content here </li> <li id="column2"> content here </li> </ul> </li> <li id="footer"> content here </li> </ul>
The only downfall of using lists as opposed to DIVs (if you could even call it a downfall) is the extra time it would take to configure CSS in order to overcome varying browser default styles, and to ensure your page content lists are not affected in the same way. This would probably take a competent CSS programmer all of 5 minutes to achieve.
Conclusion?
Whether you agree that areas of content are list data or not is down to your own discretion. You may decide to use this technique, most likely you will not. However I hope you'll agree that seeing such a cornerstone method of web design, which we all take for granted, not only questioned but then approached from an entirely different angle is nothing short of educational. I shall be staying with my DIVs, but at the back of my mind I'll always question whether I've made the right decision.
02/04/2007 
8 Comment(s)
On 10/08/2006 Owen said:
Think I'll be sticking to my trusty old div elements. Using lists would undoubtedly confuse the hell out of me I'm afraid, especially if the layout became complicated. I find it hard enough to keep track of divs from time to time.
Interesting method all the same.
On 10/08/2006 J Phill said:
While it's interesting to see how one would try structuring a page without div elements, I fail to see the point of why. Is something wrong with using Divs? And would it make your design more semantic if you ditched using Divs?
Anyhow, I disagree with this method, and I also think I'll stick to using divs.
On 10/08/2006 Steve Tucker said:
@J Phill: In my mind there in certainly nothing wrong with using DIV elements providing they are not abused (with overuse, for example). This article is more in an attempt to point out alternative methods of working to achieve the same goal, and also to question (for those people really obsessed with web design semantics) whether it is in fact a more appropriate element to use.
On 10/08/2006 Rik Lomas said:
I would say using a 'ul' for sections is abusing the semantic meaning for lists. We should be using div tags as they are for DIViding the page into separate sections. But, I agree that some people do have a tendency to overuse divs (divitis) and should be thinking of how to not misuse elements.
Incidentally, XHTML 2.0 has a new element called 'section' which is meant to replace divs, but I feel divs do the same job as a section tag would.
On 11/08/2006 P.J. Onori said:
Oh Steve, you've opened up a can of worms... ;)
That notorious article probably recieved the most fervent debate out of any of my articles. If you're really interested in why I did it and how I came to the conclusion that it just might be a good idea, you can read the article yourself.
All that aside, I was amazed at what I took as a very close-minded crowd. The notion of "if it ain't broken, don't fix it" definitely has validity, but we also would have been living in caves and eating raw meat much longer if we held to that doctrine at all times.
Thanks for the article Steve. Ironically, I came to the same conclusion as yourself. That being said, I consider it a very interesting idea and worth a second thought.
On 11/08/2006 J Phill said:
Steve, I definitely see what you mean by using UL's as an alternative, but I will have to agree with Rik in the sense that using them to replace divs would be abusing semantics. I think that for people who overuse divs, they should learn how to effectively use Divs instead of look for an alternative that essentially does the same thing.
A website should not be layed out as lists.