What is better in terms of semantics and accessibility?
<div id=""footer"> <p>stuff | more stuff<br /> stuff too | more stuff again</p> </div>
or
<div id=""footer"> <ul><li>stuff</li> | <li>more stuff</li> <li>stuff too</li> | <li>more stuff again</li></ul> </div>
Amit,
I suppose you need to ask yourself, why are you splitting the list visually into two rows? Is it because you're grouping the items in semantic pairs, or is it because two items are all that seem to fit, given your particular font size and container width?
Guessing that your reason for splitting the list is presentational, not semantic, I'd go with the unordered list where the split into rows can be handled by CSS.
One way to do this would be to assign the block LIs "float: left;" and the UL a constraining width. The list items will fill out the list width and then wrap to the next row. Depending on the width of their container, this might be one row or two or more. If you change your page layout in the future to make the container wider or narrower, you won't have to worry about moving that pesky line-break -- your list will break naturally at the new width.
On the other hand, if you're splitting the list for semantic reasons, I'd still use UL/LI, but I'd make each sub-group of items its own unordered list:
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
<ul>
<li>item 3</li>
<li>item 4</li>
</ul>As to your list separators, I don't believe unordered lists are supposed to contain anything but LIs, so your " | " characters between LIs wouldn't validate. I've used various methods to get around this. One way is to include the delimiter in each list item:
<ul>
<li>item 1<span> | </span></li>
<li>item 2</li>
<li>item 3<span> | </span></li>
<li>item 4</li>
</ul>Another way is to give the delimiters their own list items:
<ul>
<li>item 1</li>
<li>|</li>
<li>item 2</li>
<li>item 3</li>
<li>|</li>
<li>item 4</li>
</ul>I don't really like either method when I'm considering the delimiter to be presentational, not semantic.
I don't use the :after pseudo-element yet, only because it doesn't work cross-browser.
An alternative that utilizes CSS is to introduce the delimiter as a background image for selected items. Of course, this doesn't advance one's CSS karma, because in order to assign the delimiter to selected items it's necessary to mark those items in HTML:
<ul>
<li class="delimit">item 1</li>
<li>item 2</li>
<li class="delimit">item 3</li>
<li>item 4</li>
</ul>This is, in fact, flagging presentation in HTML, so we haven't advanced much if any from the old school.
Any suggestions for how to exit the box?
Paul
****************************************************** The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
