为HTML中的列表提供标题，标题或标签的最佳实践

为HTML列表提供标题的最佳方法是什么？例如

水果

应该如何处理“水果”一词，特别是如果我想要它在语义上与名单本身相关？

虽然没有标题或标题元素有效地构build您的标记可以有相同的效果。这里有一些build议：

嵌套列表

<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元素，我觉得工作很好。

尽pipe他们的名字，他们没有被定义为限于graphics插图。

例：

 <figure> <figcaption>Fruit</figcaption> <ul> <li>Apple</li> <li>Pear</li> <li>Orange</li> </ul> </figure>

这些可以很容易地用CSS来devise。

选项2

使用CSS3 :: before伪元素可以是一个很好的解决scheme：

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]select器。例如，你可以添加一个'title-as-header'类，并使用ul.title-as-header::before或者任何你需要的。

这确实有给你提供整个列表的工具提示的副作用。如果你不想要这样的工具提示，你可以使用一个数据属性（例如， <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>和<figure>标签在语义上略微更加完善。

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

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