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

这困扰了我一段时间，我想知道在如何正确执行此操作方面是否存在共识。当我使用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标签进行样式控制来控制整个标题。

正确的方法是什么？有任何想法吗？

正如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. -->

在这种情况下，我将这样使用定义列表：

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

您的第一个选择是好的。这是问题最少的一个，您已经找到了不能使用其他选项的正确原因。

顺便说一句，您的标题与 <ul>：就在列表之前！;）

编辑：史蒂夫福克纳，W3C HTML5的编辑之一和5.1已经勾勒出一个定义一个的lt元件。那是他将针对HTML 5.2讨论的非正式草案，仅此而已。

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

您还可以使用<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）

尝试在CSS中定义新类ulheader。p.ulheader〜ul选择紧随“我的标题”之后的所有内容

p.ulheader ~ ul {
   margin-top:0;
{
p.ulheader {
   margin-bottom;0;
}

根据w3.org（请注意，此链接在已过期的HTML 3.0规范草案中）：

无序列表通常是项目的项目符号列表。HTML 3.0使您能够自定义项目符号，不使用项目符号，以及水平或垂直包装多列列表的列表项。

开幕名单标记必须为<UL>。它后面是一个可选的列表标题（<LH> caption </LH>），然后是第一个列表项（<LI>）。例如：

<UL>
  <LH>Table Fruit</LH>
  <LI>apples
  <LI>oranges
  <LI>bananas
</UL>

可以表示为：

餐桌水果

• 苹果
• 橘子
• 香蕉

注意：某些旧版文档可能在第一个LI元素之前包含标题或纯文本。建议HTML 3.0用户代理的实现者应考虑这种可能性，以便处理格式不正确的旧文档。

我把标题放在ul里面。没有规则说UL必须仅包含LI元素。