为 HTML 列表提供语义标题的正确方法是什么?例如,以下列表具有“标题”/“标题”。
水果
- 苹果
- 梨
- 橙子
应该如何处理“水果”这个词,使其在语义上与列表本身相关联?
为 HTML 列表提供语义标题的正确方法是什么?例如,以下列表具有“标题”/“标题”。
水果
应该如何处理“水果”这个词,使其在语义上与列表本身相关联?
虽然没有有效地构建标记的标题或标题元素可以产生相同的效果。以下是一些建议:
嵌套列表
<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>
选项1
HTML5 有figure
andfigcaption
元素,我觉得它们工作得很好。
例子:
<figure>
<figcaption>Fruit</figcaption>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
</figure>
然后使用 CSS 轻松设置这些样式。
选项 2
使用 CSS3 的 ::before 伪元素可能是一个不错的解决方案:
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]
;不同的选择器。例如,您可以添加一个“标题作为标题”类并使用它ul.title-as-header::before
,或者您需要的任何东西。
这确实具有为您提供整个列表的工具提示的副作用。如果您不想要这样的工具提示,您可以改用数据属性(例如,<ul data-title="fruit">
和ul[data-title]::before { content: attr(data-title); }
)。
据我所知,当前的 HTML 规范中没有为列表提供标题的规定,就像表格一样。我现在会继续使用分类段落或标题标签。
<h3>Fruit</h3>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
将来,当 HTML5 获得更广泛的采用时,您将能够使用<legend>
and<figure>
标记在语义上稍微增加一点。
有关更多信息,请参阅W3C 邮件列表上的这篇文章。
为确保屏幕阅读器将列表连接到关联的标题,您可以使用如下所示aria-labelledby
的连接到标题id
:
<h3 id="fruit-id">Fruit</h3>
<ul aria-labelledby="fruit-id">
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
如上一个答案所述,请确保您的标题级别遵循文档中的标题顺序。
对于像表格这样的列表,没有类似标题的标签。所以我只是给它一个<Hx>
(x取决于你以前使用的标题)。
我知道这是旧的,但想添加我为未来的人找到的答案: https ://www.w3.org/MarkUp/html3/listheader.html
使用<lh>
元素:
<ul>
<lh>Types of fruit:</lh>
<li>Apple</li>
<li>Orange</li>
<li>Grape</li>
</ul>
由于我试图找到一个支持旧浏览器的解决方案,所以我有一个可能过于简化的解决方案。使用表格显示样式和 ids/classes:
<ul>
<li id="listCaption">My List</li>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
然后将display: table-row;
样式应用到 CSS 中的元素:
li#listCaption {
display: table-row;
font-size: larger;
text-decoration: underline; }
如果您使用描述列表,这会更好,这是我在遇到相同问题时所做的。在这种情况下,您可以<div>
在 HTML 和display: table-caption;
CSS 中使用,因为 dl 列表中支持 div 元素:
<dl>
<div id="caption">Table Caption</div>
<dt>term</dt>
<dd>definition</dd>
</dl>
在 CSS 中,您可以将各种样式应用于标题:
#caption {
display: table-caption;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
background: transparent;
caption-side: top;
text-align: center; }
我应该注意到它在被视为块元素时table-caption
效果不佳,并且文本将垂直对齐,这可能是您不想要的。ul/ol
我在 Firefox 和 Chrome 中都对此进行了测试。
您始终可以使用<label/>
将标签关联到您的列表元素:
<div>
<label for="list-2">TEST</label>
<ul id="list-1">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<label for="list-2">TEST</label>
<ol id="list-2">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>