如何在语义上为HTML中的列表提供标题，标题或标签

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

水果

• 苹果
• 梨
• 橙子

应该如何处理“水果”一词，使其在语义上与列表本身相关联？

尽管没有标题或标题元素可以有效地构造您的标记，但效果相同。这里有一些建议：

嵌套清单

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

选项1

HTML5具有figure和figcaption元素，我觉得它工作得很好。

例：

<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或其他所需的东西。

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

据我所知，当前的HTML规范中没有像表那样为列表提供标题的条款。我将暂时使用分类段落或标头标记。

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

将来，随着HTML5的广泛采用，您将可以使用<legend>and<figure>标记在语义上稍微完成一点。

有关更多信息，请参见W3C邮件列表上的这篇文章。

为了确保屏幕阅读器将列表连接到关联的标题，您可以使用诸如此类的aria-labelledbyconnected标题id：

<h3 id="fruit-id">Fruit</h3>

<ul aria-labelledby="fruit-id">
  <li>Apple</li>
  <li>Pear</li>
  <li>Orange</li>
</ul>

如上一个答案所述，请确保标题级别遵循文档中的标题顺序。

像表一样的列表没有类似标题的标签。因此，我只给它一个<Hx>（x，取决于您先前使用的标头）。

我知道这很旧，但想添加我为将来的人找到的答案：https : //www.w3.org/MarkUp/html3/listheader.html

使用<lh>元素：

<ul>
  <lh>Types of fruit:</lh>
  <li>Apple</li>
  <li>Orange</li>
  <li>Grape</li>
</ul>

由于我一直在寻找一个具有较旧浏览器支持的解决方案，因此我认为这可能是一个过于简化的解决方案。使用表格显示样式和ID /类：

    <ul>
        <li id="listCaption">My List</li>
        <li>first item</li>
        <li>second item</li>
        <li>third item</li>
      </ul>

然后将display: table-row;样式应用于CSS中的元素：

    li#listCaption {
      display: table-row;
      font-size: larger;
      text-decoration: underline; }

如果您使用的是描述列表，那么效果会更好，这是我在遇到相同问题时所做的事情。在这种情况下，您可以<div>在HTML和display: table-caption;CSS中使用，因为dl列表中支持div元素：

    <dl>
        <div id="caption">Table Caption</div>
        <dt>term</dt>
        <dd>definition</dd>
    </dl>

在CSS中，您可以将各种样式应用于标题：

    #caption {
        display: table-caption;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        background: transparent;
        caption-side: top;
        text-align: center; }

我应该注意，由于它被视为块元素，因此table-caption效果不佳，ul/ol并且文本将垂直对齐，这可能是您不希望的。

我在Firefox和Chrome中都对此进行了测试。

您始终可以使用<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>