如何在HTML中以语义方式为列表提供标题，标题或标签

Question

为HTML列表提供语义标题的正确方法是什么？例如，以下列表具有“标题”/“标题”。

水果

• 苹果
• 梨
• 橙子

应该如何处理“水果”这个词，以便它在语义上与列表本身相关联？

Answer 1

虽然没有标题或标题元素结构，但您的标记可以有效地产生相同的效果。以下是一些建议：

嵌套列表

<ul>
    <li>
        Fruit
        <ul>
            <li>Apple</li>
            <li>Pear</li>
            <li>Organge</li>
        </ul>
    </li>
</ul>

---

列表之前的标题

<hX>Fruit</hX>
<ul>
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
</ul>

---

定义清单

<dl>
  <dt>Fruit</dt>
  <dd>Apple</dd>
  <dd>Pear</dd>
  <dd>Orange</dd>
</dl>

Answer 2

选项1

HTML5有figure and figcaption elements，我发现它非常好用。

例：

<figure>
    <figcaption>Fruit</figcaption>
    <ul>
        <li>Apple</li>
        <li>Pear</li>
        <li>Orange</li>
    </ul>
</figure>

然后使用CSS轻松设置这些样式。

---

选项2

使用CSS3的:: before伪元素可以是一个很好的解决方案：

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;
}

当然，你可以使用与ul[title]不同的选择器;例如，你可以添加一个'title-as-header'类，改用ul.title-as-header::before，或者你需要的任何东西。

这确实有一个副作用，为您提供整个列表的工具提示。如果您不想要这样的工具提示，则可以使用数据属性（例如，<ul data-title="fruit">和ul[data-title]::before { content: attr(data-title); }）。

Answer 3

据我所知，目前的HTML规范中没有为列表提供标题的规定，就像表格一样。我现在继续使用分类段落或标题标签。

<h3>Fruit</h3>
<ul>
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
</ul>

将来，当HTML5获得更广泛的采用时，您将能够使用<legend>和<figure>标签在语义上稍微完成这一点。

有关更多信息，请参阅W3C邮件列表中的this post。

Answer 4

像表一样的列表没有类似标题的标记。所以我只是给它一个<Hx>（x取决于你以前使用的标题）。

Answer 5

您始终可以使用<label/>将标签与列表元素相关联：

<div>
    <label for="list-2">TEST</label>
    <ul id="list-1">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
    <label for="list-2">TEST</label>
    <ol id="list-2">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
</div>