How to semantically provide a caption, title or label for a list in HTML
Option 1
HTML5 has the figure
and figcaption
elements, which I find work quite nicely.
Example:
<figure>
<figcaption>Fruit</figcaption>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
</figure>
These are then easily styled with CSS.
Option 2
Using CSS3's ::before pseudo-element can be a nice solution:
HTML:
<ul title="Fruit">
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
CSS:
ul[title]::before {
content: attr(title);
/* then add some nice styling as needed, eg: */
display: block;
font-weight: bold;
padding: 4px;
}
You can, of course, use a different selector than ul[title]
; for example, you could add a 'title-as-header' class and use ul.title-as-header::before
instead, or whatever you need.
This does have the side effect of giving you a tooltip for the whole list. If you don't want such a tooltip, you could use a data attribute instead (e.g., <ul data-title="fruit">
and ul[data-title]::before { content: attr(data-title); }
).
While there is no caption or heading element structuring your markup effectively can have the same effect. Here are some suggestions:
Nested List
<ul>
<li>
Fruit
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Organge</li>
</ul>
</li>
</ul>
Heading Prior to List
<hX>Fruit</hX>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
Definition List
<dl>
<dt>Fruit</dt>
<dd>Apple</dd>
<dd>Pear</dd>
<dd>Orange</dd>
</dl>