如何以语义方式为HTML中的列表提供标题、标题或标签
如何以语义方式为HTML中的列表提供标题、标题或标签
提问于 2009-07-17 06:15:29
为列表提供HTML语义标题的正确方法是什么？例如，下面的列表有一个"title"/"caption“。
水果
苹果
- Pear
- Orange
“水果”这个词应该如何处理，以使它在语义上与列表本身相关联？
回答 8
Stack Overflow用户
回答已采纳
发布于 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>Stack Overflow用户
发布于 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); })。
Stack Overflow用户
发布于 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。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1141639
复制相关文章
相似问题