[thelist] semantic markup

[Kristof Neirynck]

Diane Soini wrote:
> So why then do we have to drive ourselves nuts trying to style, for 
> example, <li> tags with CSS (probably one of the most difficult elements 
> to style consistently across browsers) just to make a user interface 
> navigation bar? (Or the image with the caption problem, for another 
> example.)
> 
> The thing that really bugs me with <li> tags is that for browsers such 
> as Lynx that do not use the CSS, you get a vertical list of links rather 
[snip]

I have some other options:

1.
<p id="nav">
   <span>Sections: <br /><span>
   <a href="...">text</a><span>, </span>
   <a href="...">text</a><span>, </span>
   <a href="...">text</a><span> and </span>
   <a href="...">text</a><span>.</span>
</p>

2.
<table id="nav"><tbody><tr>
   <th scope="row">Sections: </th>
   <td><a href="...">text</a><span>, </span></td>
   <td><a href="...">text</a><span>, </span></td>
   <td><a href="...">text</a><span> and </span></td>
   <td><a href="...">text</a><span>.<br /></span></td>
</tr></tbody></table>

It is semantic,
easy to style,
looks good in Lynx,
and visualy impaired users will understand it.

The "<br />" at the end of the 2nd example is quite nessecary for those 
browsers that turn tables off. (shift-F11 in opera to see this)

The spans could have a class added to make shure you don't hide the 
wrong spans.
Using "<b>" instead of span would be unsemantic.
Those should not be bold in any way.

Maybe it's time for a new simplequiz?


-- 
Kristof