如何在语义上将标题添加到列表中
这一直困扰着我，我想知道如何正确地做到这一点是否有共识。 当我使用HTML列表时，如何在语义上包含列表的标题？
一个select是这样的：
<h3>Fruits I Like:</h3> <ul> <li>Apples</li> <li>Bananas</li> <li>Oranges</li> </ul> 但是在语义上<h3>标题并不明确地与<ul>关联
另一个select是这样的：
<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的正式组成部分
我听说它build议我们使用<label>就像一个表单：
<ul> <label>Fruits I Like:</label> <li>Apples</li> <li>Bananas</li> <li>Oranges</li> </ul>
但是这有点奇怪，无论如何也不会validation。
当试图devise我的列表头文件时，很容易看到语义问题，最终我需要将<h3>标签放在第一个<li> ，并将它们定位为如下所示的样式：
ul li:first-of-type { list-style: none; margin-left: -1em; /*some other header styles*/ }
恐怖！ 但至less这样我可以通过deviseul标签来控制整个<ul> ，标题和全部。
什么是正确的方法来做到这一点？ 有任何想法吗？
正如Felipe Alsacreations所说，第一种select是好的。
如果您想确保列表下方的任何内容都不会被解释为属于标题，那么这正是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>
你的第一个select是好的。 这是问题最less的问题，您已经find了无法使用其他选项的正确原因。
顺便说一下，你的标题是显式地与<ul>相关联的：它就在列表之前！ ;）
编辑：W3C HTML5和5.1的编辑之一Steve Faulkner 勾画出一个 lt元素 的定义 。 这是一个非正式的草案 ，他将讨论HTML 5.2，现在还没有。
一个<div>是你的内容中的一个逻辑划分，在语义上这是我的第一select，如果我想与列表标题：
<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...
根据w3.org （请注意，这个链接是在过期的草稿HTML 3.0规范 ）：
无序列表通常是项目的项目列表。 HTML 3.0使您能够自定义项目符号，没有项目符号，并为多列列表水平或垂直地包装列表项目。
开始列表标记必须是
<UL>。 后面是一个可选的列表标题（<LH>标题</LH>），然后是第一个列表项（<LI>）。 例如：<UL> <LH>Table Fruit</LH> <LI>apples <LI>oranges <LI>bananas </UL>可以呈现为：
表水果
- 苹果
- 桔子
- 香蕉
注意：一些遗留文档可能在第一个LI元素之前包含标题或纯文本。 build议HTML 3.0用户代理的实现者为了处理糟糕的遗留文档而迎合这种可能性。
尝试在CSS中定义一个新的类，ulheader。 p.ulheader〜ulselect紧跟在My Header之后的所有内容
p.ulheader ~ ul { margin-top:0; { p.ulheader { margin-bottom;0; }
我把标题放在ul里面。 没有规定说UL必须只包含LI元素。
