这一直困扰着我一段时间,我想知道如何正确地做到这一点是否有任何共识。当我使用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
标签。
这样做的正确方法是什么?有任何想法吗?
正如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的编辑之一Steve Faulkner概述了lt
element的定义。这是他将讨论HTML 5.2的unofficial draft,仅此而已。
<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选择紧跟在My Header之后的所有内容
p.ulheader ~ ul {
margin-top:0;
{
p.ulheader {
margin-bottom;0;
}
根据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用户代理的实现者满足这种可能性,以便处理格式错误的遗留文档。
我把标题放在了ul里面。没有规则说UL必须只包含LI元素。