Titling unordered lists and tables

...without messing up the hierarchy of the document

[ronin]

Two questions about titles / headings within elements:

Question 1) I am redesigning one of my page templates and where I was using <h2>s above several of the <ul> contents lists, I have decided that those contents lists are themselves incidental to the page structure and so I would rather not give their headings as much authority as an <h2>, which helps define the document hierarchy.

Instead, I want to establish a title within the element itself. Is it possible? How would I go about it?

A.

<ul>
<li class="title">TITLE HERE</li>
<li>List item 1</li>
<li>List item 2</li>
</ul>

B.

<dl>
<dt>TITLE HERE</dt>
<dd><ul>
<li>List item 1</li>
<li>List item 2</li>
</ul></dd>
</dl>

To be honest, I'm not happy with either of these options. Is there a better idea out there?

Question 2) While we're at it, what is the correct way of giving a table element a heading, inside the table tags? I was operating on the understanding that the correct syntax was to use <thead> but now after re-reading the specs, it looks like <caption> is the right label. So what's <thead> for?

Thanks in advance!

[encyclo]

As you can use multiple definition descriptions (dd) for each definition term, you don't need to nest the unordered list. So I would simply go for this:

<dl>
<dt>TITLE HERE</dt>
<dd>List item 1</dd>
<dd>List item 2</dd>
</dl>

It's a bit wobbly in terms of semantics, but a definition list is the best we've got at the moment (the only way of associating content in this way).

For table headings are we just talking about column headers? If so then you can use

th

instead of

td

:

<table>
<tr>
<th>heading 1</th>
<th>heading 2</th>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
</table>

Of course for the best accessibility you need to associate the content with the heading, which you can do with an

id

and some

headers

attributes:

<table>
<tr>
<th id="one">heading 1</th>
<th id="two">heading 2</th>
</tr>
<tr>
<td headers="one">text</td>
<td headers="two">text</td>
</tr>
<tr>
<td headers="one">text</td>
<td headers="two">text</td>
</tr>
</table>

[Robin_reala]

For the lists why not use a lower level heading if an h2 is not appropriate? Beyond that I've not got many ideas.

For the table you've already got a purpose built element - <caption>. Be warned though - styling it in a cross browser way has some issues.

[ronin]

Thank you, both of you.

encyclo:

For table headings are we just talking about column headers?

No, just a heading for the whole table.

As for using a definition list, I take your point but I'm hesitant to use it in this instance. It would be like using tables for layout.

Robin_reala:

Oh, I see... <caption> is it for table headings? Great, thanks for that. I'll go and have a look at the spec.

As for using a lower level heading, no, that won't do at all. In this example:

<h1>Main Title for Document</h1>
<h2>Sub-section 1</h2>
<h2>List Title</h2>
<ul><li></li><li></li></ul>

The document structure is something like:

Main Title
1.0 Sub-section 1
2.0 List Title

If you changed the list title to an <h3>, you'd get:

Main Title
1.0 Sub-section 1
1.1 List Title

and if you changed it to an <h4>, you'd get:

Main Title
1.0 Sub-section 1
1.0.1 List Title

neither of which really make much sense.

[Robin_reala]

From your post it sounds like although you don't want the list heading to be as important the structure demands it. If it's just the vusual impact you're worried about you could give the <h2> a class and then style that to stand out less.

[ronin]

Heh. Believe me, it's not the visual impact I'm worried about, it's keeping the document outline lean and relevant.

What I want is:

Main Heading
1.0
2.0
2.1
2.1.1
2.1.2
3.0
3.1
4.0
4.1
5.0
6.0

... and what I currently have - as a result of a number of incidental content lists near the top of the page - is an extra three 2.0 level sections at the top of the document structure.

The lists, of themselves, require titles. But their titles are not significant enough to have a place in the outline.

[pageoneresults]

What about using an Ordered List instead?

HTML Techniques for Web Content Accessibility Guidelines 1.0 - 4 Lists [w3.org]

Whenever I have doubts about document structure, the first thing I do is browse the W3. Viewing the source of their pages makes things gel a little more quickly and who better to follow than the authority on the subject? ;)

It looks like a combination of <h>, <ol>, <ul> and <dl> might be in order.

Additional information...

Lists in HTML documents - 10 Lists [w3.org]

[ronin]

Thanks for those two links, pageoneresults.

The list of ingredients in the recipe example seems to lean towards [B] in my original post where there is a definition list with a Definition Term at the top and then a Definition Description consisting of an Unordered List:

<dl>
<dt>The ingredients:</dt>
<dd>
<ul>
<li>100 g. flour</li>
<li>10 g. sugar</li>
<li>1 cup water</li>
<li>2 eggs</li>
<li>salt, pepper</li>
</ul>
</dd>

...

This isn't ideal for me semantically, because on the page that I'm trying to mark up properly, my list items don't form a complete description of the term as they do in this recipe example, instead, the list items are merely examples of the term... but perhaps this is the best compromise.