如何在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和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改为使用,或者你需要的任何东西.

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

Answer 3

为了确保屏幕阅读器将列表连接到关联的标题，您可以使用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 4

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

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

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

有关详细信息,请参阅W3C邮件列表中的这篇文章.