如何语义提供在HTML列表的标题，标题或标签(How to semantically provide

什么是提供一个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和figcaption元素 ，我觉得这工作相当不错。

例：

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

然后这些容易与CSS样式。

---

选项2

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

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] ; 例如，你可以添加一个“冠军的头”类，并使用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邮件列表以获取更多信息。

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>

文章来源: How to semantically provide a caption, title or label for a list in HTML