Public news / February 2006 / DIVless
DIVless
An experiment with using unordered lists for layout structure instead of DIVs.
There are 13 guest comments so far.
Search the archive
Stylegala news archive
- July 2008 [6]
- June 2008 [46]
- May 2008 [5]
- April 2008 [5]
- March 2008 [3]
- February 2008 [4]
- January 2008 [7]
- December 2007 [3]
- November 2007 [8]
- October 2007 [17]
- September 2007 [12]
- August 2007 [12]
- July 2007 [12]
- June 2007 [11]
- May 2007 [25]
- April 2007 [17]
- March 2007 [19]
- February 2007 [19]
- January 2007 [23]
- December 2006 [15]
- November 2006 [23]
- October 2006 [39]
- September 2006 [29]
- August 2006 [50]
- July 2006 [38]
- June 2006 [29]
- May 2006 [27]
- April 2006 [50]
- March 2006 [38]
- February 2006 [38]
- January 2006 [65]
- December 2005 [45]
- November 2005 [41]
- October 2005 [44]
- September 2005 [46]
- August 2005 [42]
- July 2005 [32]
- June 2005 [36]
- May 2005 [55]
- April 2005 [50]
- March 2005 [37]
- February 2005 [65]
- January 2005 [94]
- December 2004 [61]
- November 2004 [67]
- October 2004 [12]
- September 2004 [1]
Public news archive
- July 2008 [20]
- June 2008 [115]
- May 2008 [126]
- April 2008 [77]
- March 2008 [69]
- February 2008 [80]
- January 2008 [72]
- December 2007 [35]
- November 2007 [54]
- October 2007 [66]
- September 2007 [51]
- August 2007 [65]
- July 2007 [58]
- June 2007 [68]
- May 2007 [87]
- April 2007 [75]
- March 2007 [65]
- February 2007 [62]
- January 2007 [68]
- December 2006 [52]
- November 2006 [51]
- October 2006 [73]
- September 2006 [52]
- August 2006 [85]
- July 2006 [57]
- June 2006 [67]
- May 2006 [103]
- April 2006 [77]
- March 2006 [93]
- February 2006 [99]
- January 2006 [111]
- December 2005 [104]
- November 2005 [83]
- October 2005 [125]
- September 2005 [106]
- August 2005 [94]
- July 2005 [103]
- June 2005 [79]
- May 2005 [79]
- April 2005 [65]
- March 2005 [47]
- February 2005 [35]
- January 2005 [22]
- December 2004 [31]
- November 2004 [37]
News contributors
Features
- Stylegala BookStore
- The Stylegala BookStore has a massive archive of great books for you as a professional..
- Bullet madness
- Bullet madness is a list of 200 bullets, arrows and icons uploaded by our users.
- CSS Reference
- An alphabetical list over the most common CSS1 and CSS2 syntax and properties.
Sponsors

(I e-mailed you about this, but heck, I'll comment.) While I totally agree on coding semantically, and do it myself as far as possible, I don't agree with this approach. Divisions are indeed very unsemantic, but lists definitely don't seem semantic either.
The best way to do it is to simply remove all those divisions you really don't need, constructing the same layout in a different way. Not just replacing all the divisions with other tags.
I agree. I think its about replacing divs that are not needed not replacing them all. Great bit of code though.
Lists are elements that should only be used for, well, lists. Using lists for items on the page that aren't lists, is pure semantic violation. I see no sense in replacing divs. Their purpose is to divide content and that's where and when they should be applied. Unordered lists have a semantic purpose and should be used for that purpose only. I prefer a semantic approach to designing which is why I do not agree with your method. :)
Thanks for the comments guys. I agree, it's definitely out of the norm. I'm not sure if I would go as far to say that it's a pure semantic violation. However, I can agree that it's stretching the definition of what a list semantically is. I totally understand your positions though - I think it throws up a good discussion.
Thanks for the comments guys. :)
I think this is an interesting idea, and I have to say I am surprised by the comments so far. These example do not violate a "semantic approach" to design; they embody it. The semantic purpose of lists is to convey a hierarchical content structure, which is what these examples are doing. Divs are just empty containers, without much meaning. Using divs to separate content may have more of a semantic purpose than using, say, tables, but all you are doing is grouping things in a very general way: you've lost the hierarchy. Nesting divs merely recreates the hierarchy that lists already possess.
Violation in semantic terms. The question is, does it matter? Maybe not. Divs have no semantic meaning at all. But I'd still say using lists to create your entire layout structure is semantically incorrect. This is only my personal opinion. However, what I really like about your approach is that you've given me food for thought. :)
Maleika, can you explain why you think this is semantically incorrect? It's not a "layout structure" (which is visual) but a semantic structure, which has to do with meaning: P.J. is using lists to delineate a semantic hierarchy. I'm not arguing with you, just curious. :)
Hi John,
this quote by p.j. is what I have a problem with personally:
"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."
Nonetheless I find it an interesting approach.
I thought by giving a div a logical id you are thus giving it meaning. do you mean to tell me that designing with divs is wrong? just as wrong as tables? if so what the hell are we supposed to be using? and how do visually design the page using unordered list where one of the nestd items needs to float or be placed absolutely, which takes it out of the natural flow of the page?
Whoa man, I never said designing with DIVs was wrong. I stated it was an interesting alternative that in my opinion added more semantical heirarchy and organization. Please don't read too much into this - it's intended for experiment and debate.
I wasnt talking to you PJ, more to the others here who have said that designing with divs is non semantic and some who have asserted that we should not use them at all
Who said that? I don't see that anywhere on this page. I think you're reading to much into things. No one said you shouldn't use divs or that they are "non semantic." I just pointed out that lists ALSO have meaning. Lists are hierarchical; even though divs can be hierarchical, hierarchy is already intrinsic to the nature of lists. Is that really so radical?
DIVs do not currently have semantic meaning only because we choose not to bestow any upon them.
Nevertheless, DIVs (imperfect as they may be) are already well-received and widely used for their original purpose as containers. Why not just give them a slot on the semantic hierarchy, decide on their definition (to satisfy the hair-splitters), and move on?
Add a comment:
Keep the comment relevant, constructive and be polite.
A valid email address or URL to your site must be provided, or the comment might get deleted. Content seemed inappropriate or offensive may be edited and/or deleted. Avoid explicit language and words such as "sucks" and "ripoff". For more in-depth discussions use our forum. Email addresses are never displayed. Line breaks and paragraphs are automatically converted - no need to use <p> or <br/>. Quotes & apostrophes are automatically converted to smart punctuation. Be careful when copying and pasting portions of entries or other comments. The following inline HTML elements may be used: <strong><em><pre><q><blockquote><code>. All other code will get removed before posting. Don't forget to close your tags.