Something bugs me just about every time I mark up a list in (X)HTML.
There’s no list-head (
Let’s say I’m marking up a list of my top three Last.fm artists. It would look something like:
<li>Yo La Tengo</li>
Which, of course, would then render like:
- Teenage Fanclub
- Yo La Tengo
But what if I wanted to label that list something like “My Top 3 Artists on Last.fm”. What are my options? I could throw it in a paragraph (
<p>) tag. But a random paragraph doesn’t really semantically relate it to the list. I could put it in a header tag (
<h2>, etc.). That would at least tell me it is a header to something and not just an arbitrary paragraph. But still, that header isn’t associated with the list itself in any meaningful way (beyond proximity).
If I marked this up in a table, I have the option to add a table header (
<th>). Tables are for tabular data, so for this example, I’ll show what the markup would look like if I wanted to make a table of my top three artists with the number of times I played them.
<th>My Top 3 Artists on Last.fm</th>
<td>Yo La Tengo</td>
And that would render like this:
|My Top 3 Artists on Last.fm||Play Count|
|Yo La Tengo||705|
Like the header tags and
<strong> tag, most (if not all) user agents will show the
<th> in bold. Also, since the
<th> is a different element than the standard
<td>, it is really easy to style headers differently from other table cells.
Best of all, though, the
<th> is nested inside the
<table>, meaning that it is explicitly a part of that table. Simply adding a
<h3> above the
<table> wouldn’t have the same semantic value.
Really all I’m wondering is… why don’t we have a
<lh> to use when marking up ordered and unordered lists?