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

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>'s只能含有一种或多种<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. -->

Answer 2

在这种情况下,我会使用定义列表:

<dl>
  <dt>Fruits I like:</dt>
  <dd>Apples</dd>
  <dd>Bananas</dd>
  <dd>Oranges</dd>
</dl>

Answer 3

你的第一个选择是好的选择.这是问题最少的一个,你已经找到了正确的理由,为什么你不能使用其他选项.

顺便说一句,你的标题显然与以下内容相关联<ul>:它就在列表之前!;)

编辑:W3C HTML5和5.1的编辑之一Steve Faulkner 勾勒出了一个lt元素的定义.这是一个非正式的草案,他将讨论HTML 5.2,仅此而已.

Answer 4

<div>是您内容中的逻辑分区,从语义上讲,如果我想将标题与列表分组,这将是我的第一选择:

<div class="mydiv">
    <h3>The heading</h3>
    <ul>
       <li>item</li>
       <li>item</li>
       <li>item</li>
    </ul>
</div>

然后你可以使用下面的css将所有内容组合在一起作为一个单元

.mydiv{}
.mydiv h3{}
.mydiv ul{}
.mydiv ul li{}
etc...

Answer 5

您还可以使用该<figure>元素将标题链接到列表，如下所示：

<figure>
    <figcaption>My favorite fruits</figcaption>    
       <ul>
          <li>Banana</li>
          <li>Orange</li>
          <li>Chocolate</li>
       </ul>
</figure>

资料来源：https://www.w3.org/TR/2017/WD-html53-20171214/single-page.html#the-li-element（示例 162）