为列表提供HTML语义标题的正确方法是什么?例如,下面的列表有一个"title"/"caption“。
水果
苹果
“水果”这个词应该如何处理,以使它在语义上与列表本身相关联?
发布于 2009-07-17 06:26:29
虽然没有标题或标题元素,但有效地组织您的标记可以达到同样的效果。以下是一些建议:
嵌套列表
<ul>
<li>
Fruit
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Organge</li>
</ul>
</li>
</ul>
列表之前的标题
<hX>Fruit</hX>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
定义列表
<dl>
<dt>Fruit</dt>
<dd>Apple</dd>
<dd>Pear</dd>
<dd>Orange</dd>
</dl>
发布于 2016-01-27 01:19:06
选项1
HTML5有figure
and figcaption
elements,我发现它工作得很好。
示例:
<figure>
<figcaption>Fruit</figcaption>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
</figure>
然后可以使用CSS轻松地设置这些样式。
选项2
使用CSS3的::be伪元素是一个很好的解决方案:
HTML:
<ul title="Fruit">
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
CSS:
ul[title]::before {
content: attr(title);
/* then add some nice styling as needed, eg: */
display: block;
font-weight: bold;
padding: 4px;
}
当然,您可以使用不同于ul[title]
的选择器;例如,您可以添加一个“title-as-header”类,并使用ul.title-as-header::before
,或者您需要的任何东西。
这确实有一个副作用,即为您提供整个列表的工具提示。如果你不需要这样的工具提示,你可以使用数据属性(例如,<ul data-title="fruit">
和ul[data-title]::before { content: attr(data-title); }
)。
发布于 2009-07-17 06:27:28
据我所知,目前的HTML规范中没有为列表提供标题的规定,就像表格一样。我现在还是坚持使用分类段落,或者头标记。
<h3>Fruit</h3>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
将来,当HTML5得到更广泛的采用时,您将能够使用<legend>
和<figure>
标记在语义上稍微更好地实现这一点。
有关详细信息,请参阅W3C邮件列表上的this post。
https://stackoverflow.com/questions/1141639
复制相似问题