Question

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

水果

Apple
梨
橙

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

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＆＃39; s :: 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]不同的选择器;例如，您可以添加标题标题＆＃39;类和使用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

要确保屏幕阅读器将列表连接到关联的标题，您可以使用aria-labelledby连接到带有id的标题，如下所示：

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

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

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

Answer 5

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

Answer 6

我知道这很古老，但想补充一下我为未来的人们找到的答案： 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>

Answer 7

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

Answer 8

由于我一直在寻找一个具有较旧浏览器支持的解决方案，所以我认为这可能是一个过于简化的解决方案。使用表格显示样式和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; }

如果使用描述列表，这会更好，这是我在遇到相同问题时所做的事情。在这种情况下，您可以在HTML中使用<div>，在CSS中使用display: table-caption;，因为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中都对此进行了测试。

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

8 个答案: