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

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

旧的“列表标题”<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> 相关联：它就在列表之前！ ;)

编辑：Steve Faulkner，W3C HTML5 和 5.1 的编辑之一草拟了lt element 的定义。那是unofficial draft，他将讨论 HTML 5.2，仅此而已。

Answer 4

a

是您内容中的逻辑划分，如果我想将标题与列表分组，从语义上讲，这将是我的首选：

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

Answer 6

尝试在 css 中定义一个新类 ulheader。 p.ulheader ~ ul 选择紧跟在 My Header 之后的所有内容

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

Answer 7

根据w3.org（注意这个链接在long-expired draft HTML 3.0 spec）：

无序列表通常是项目符号列表。 HTML 3.0 使您能够自定义子弹，无需子弹 并为多列水平或垂直包装列表项 列表。

开始列表标签必须是<UL>。它后面是一个可选列表 标题（<LH>caption</LH>），然后是第一个列表项（<LI>）。为了 示例：

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

可以呈现为：

食用水果

• 苹果
• 橙子
• 香蕉

注意：一些旧文档可能包含标题或纯文本 第一个 LI 元素。建议 HTML 3.0 用户代理的实现者 迎合这种可能性，以处理形成不良的遗产 文件。

Answer 8

我把标题放在 ul.没有规定说 UL 必须只包含 LI 元素。