[thelist] semantic markup

[Judah McAuley]

Kasimir K wrote:
> "The HTML table model allows authors to arrange data ... into rows and 
> columns of cells."
> 
> Ok, the data I want to arrange is the navigational structure of my site. 
> If I have more than one level there, I use columns for levels and rows 
> for subjects. And if I have just one level to present, I use just one 
> column. In the table I naturally include some desciption in the caption 
> element or summary attribute. And if I get carried away, I just may 
> group rows or columns to make the navigational structure even easier to 
> understand.
> 
> :k

I'm not really into the Semantic Markup debate much, being mostly a 
backend development guy, but this model presented has several flaws and 
demonstrates why lists make more sense for navigation than tables do.

Let's say you have 3 levels of navigation nesting. Top level sections, 
categories and pages. If you were to lay that out as a set of lists, it 
would look like so:

<ul>
   <li>
     Section 1
       <ul>
          <li>
             Category 1
             <ul>
                <li>
                    Page 1
	       </li>
             </ul>
          </li>
       </ul>
   </li>
   <li>
     Section 2
       <ul>
          <li>
             Category 2
             <ul>
                <li>
                    Page 2
	       </li>
             </ul>
          </li>
       </ul>
   </li>
</ul>

The nice thing about this layout (semantically), is that it shows the 
relationship of each item to other items.  They are all nested tags, one 
inside the other.

If you do that same layout as a table, it looks like this:

<table>
	<tr>
		<td>Section 1</td><td>&nbsp;</td><td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td><td>Category 1</td><td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td><td>&nbsp;</td><td>Page 1</td>
	</tr>
	<tr>
		<td>Section 2</td><td>&nbsp;</td><td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td><td>Category 2</td><td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td><td>&nbsp;</td><td>Page 2</td>
	</tr>
</table>

The problem here is that there is no logical relationship between 
Category 1 and Section 1. Or Page 1 and Category 1. The only 
relationship is visual.

So, yes, the navigation is still tabular data (in a visual respect), but 
logically, its nested information. And tables aren't meant for that sort 
of nesting.

To whatever extent possible, the code should show the relationships in 
the data, matching its structure at the html level and not just the 
visual level. That's an important part of semantic markup to me.

Judah