99

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

水果

  • 苹果
  • 梨
  • 橙子

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

4

8 回答 8

83

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

嵌套列表

<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>
于 2009-07-17T06:26:29.013 回答
69

选项1

HTML5 有figureandfigcaption元素，我觉得它们工作得很好。

例子：

<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];不同的选择器。例如，您可以添加一个“标题作为标题”类并使用它ul.title-as-header::before，或者您需要的任何东西。

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

于 2016-01-26T17:19:06.087 回答
13

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

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

将来，当 HTML5 获得更广泛的采用时，您将能够使用<legend>and<figure>标记在语义上稍微增加一点。

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

于 2009-07-17T06:27:27.607 回答
5

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

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

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

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

于 2020-04-29T17:33:36.323 回答
1

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

于 2009-07-17T06:22:34.137 回答
-1

我知道这是旧的，但想添加我为未来的人找到的答案： 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>
于 2020-09-10T12:49:56.480 回答
-1

由于我试图找到一个支持旧浏览器的解决方案，所以我有一个可能过于简化的解决方案。使用表格显示样式和 ids/classes：

    <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 中都对此进行了测试。

于 2020-10-16T20:53:44.503 回答
-3

您始终可以使用<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>
于 2019-03-09T02:16:03.987 回答