如何在语义上向列表添加标题

这个问题困扰我已经有一段时间了，我想知道对于如何正确处理这个问题是否存在共识。在使用 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标签。

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

148793 次浏览
小开

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

顺便说一下，您的标题显式地与 <ul>相关联: 它就在列表的前面! ;)

编辑: Steve Faulkner，W3C HTML5和5.1的编辑之一，有 勾勒出一个定义的 lt元素。这是一个 非正式草案，他将讨论 HTML 5.2，没有更多的了。

小开
最佳答案

正如 FelipeAlsacreations 已经说过的，第一个选择是好的。

如果您希望确保列表下面的内容不会被解释为属于标题，那么这正是 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. -->
小开

A < 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...
小开

在这种情况下，我会使用一个定义列表:

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

我把标题放在 UL 中，没有规则说 UL 必须只包含 LI 元素。

小开

根据 W3.org(注意这个连结是在 过期已久的 HTML 3.0规范草案) :

无序列表通常是项目的项目符号列表 让你能够定制子弹，不需要子弹 以及水平或垂直包装多列的列表项 清单。

开始的列表标记必须是 <UL>，后面跟着一个可选的列表 头(<LH>caption</LH>) ，然后按第一个列表项(<LI>) 例如:

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

它可以表示为:

餐桌水果

  • 苹果
  • 橙子
  • 香蕉

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

小开

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

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

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


提交答案