html - 如何在语义上将标题添加到列表

Question

这已经困扰我一段时间了，我想知道是否就如何正确执行此操作达成了共识。当我使用 HTML 列表时，如何在语义上包含列表的标题？

一个选项是:

<h3>Fruits I Like:</h3>
<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

但在语义上是 <h3>标题未与 <ul> 明确关联

另一种选择是:

<ul>
    <li><h3>Fruits I Like:</h3></li>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

但这看起来有点脏，因为标题实际上并不是列表项之一。

W3C 不允许此选项:

<ul>
    <h3>Fruits I Like:</h3>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

作为<ul>的只能包含一个或多个 <li>的

旧的“列表标题”<lh>最有意义

<ul>
    <lh>Fruits I Like:</lh>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

但当然它不是 HTML 的正式部分

我听说有人建议我们使用 <label>就像一个表格:

<ul>
    <label>Fruits I Like:</label>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

但这有点奇怪，无论如何都不会验证。

在尝试设置列表标题样式时很容易看出语义问题，我最终需要将 <h3> 放在此处第一个 <li> 内的标签并针对它们进行样式设置，例如:

ul li:first-of-type {
    list-style: none;
    margin-left: -1em;
    /*some other header styles*/
}

恐怖!但至少这样我可以控制整个 <ul> 、标题和所有内容，通过设置 ul 的样式标签。

正确的做法是什么？有什么想法吗？

Answer 1

正如 Felipe Alsacreations 所说，第一个选项很好。

如果您想确保列表下方的任何内容都不会被解释为属于标题，这正是 HTML5 分段内容元素的用途。所以，例如你可以这样做

<h2>About Fruits</h2>
<section>
  <h3>Fruits I Like:</h3>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
  </ul>
</section>
<!-- anything here is part of the "About Fruits" section but does not 
     belong to the "Fruits I Like" section. -->