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

Question

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

水果

• 苹果
• 梨
• 橙子

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

原文由 Jon P 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

选项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); } ）。

原文由 daiscog 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

嵌套列表

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

原文由 ahsteele 发布，翻译遵循 CC BY-SA 3.0 许可协议