如何在语义上为 HTML 中的列表提供标题、标题或标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1141639/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to semantically provide a caption, title or label for a list in HTML
提问by Jon P
What is the proper way to provide a semanticcaption for an HTML list? For example, the following list has a "title"/"caption".
为 HTML 列表提供语义标题的正确方法是什么？例如，下面的列表有一个“标题”/“标题”。
Fruit
水果
- Apple
- Pear
- Orange
- 苹果
- 梨
- 橘子
How should the word "fruit" be handled, in a such way that it is semantically associated with the list itself?
应如何处理“水果”一词，使其在语义上与列表本身相关联？
采纳答案by ahsteele
While there is no caption or heading element structuring your markup effectively can have the same effect. Here are some suggestions:
虽然没有标题或标题元素有效地构建您的标记可以具有相同的效果。以下是一些建议：
Nested List
嵌套列表
<ul>
<li>
Fruit
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Organge</li>
</ul>
</li>
</ul>
Heading Prior to List
列表之前的标题
<hX>Fruit</hX>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
Definition List
定义列表
<dl>
<dt>Fruit</dt>
<dd>Apple</dd>
<dd>Pear</dd>
<dd>Orange</dd>
</dl>
回答by daiscog
Option 1
选项1
HTML5 has the figureand figcaptionelements, which I find work quite nicely.
HTML5 有figure和figcaption元素，我觉得这很好用。
Example:
例子：
<figure>
<figcaption>Fruit</figcaption>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
</figure>
These are then easily styled with CSS.
然后可以使用 CSS 轻松设置这些样式。
Option 2
选项 2
Using CSS3's ::before pseudo-element can be a nice solution:
使用 CSS3 的 ::before 伪元素是一个不错的解决方案：
HTML:
HTML：
<ul title="Fruit">
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
CSS:
CSS：
ul[title]::before {
content: attr(title);
/* then add some nice styling as needed, eg: */
display: block;
font-weight: bold;
padding: 4px;
}
You can, of course, use a different selector than ul[title]; for example, you could add a 'title-as-header' class and use ul.title-as-header::beforeinstead, or whatever you need.
当然，您可以使用与ul[title];不同的选择器。例如，您可以添加一个“title-as-header”类并ul.title-as-header::before改为使用，或者您需要的任何内容。
This does have the side effect of giving you a tooltip for the whole list. If you don't want such a tooltip, you could use a data attribute instead (e.g., <ul data-title="fruit">and ul[data-title]::before { content: attr(data-title); }).
这确实具有为您提供整个列表的工具提示的副作用。如果您不想要这样的工具提示，您可以改用数据属性（例如，<ul data-title="fruit">和ul[data-title]::before { content: attr(data-title); }）。
回答by sixthgear
As far as I know, there are no provisions in current HTML specs for providing a caption for a list, as there are with tables. I'd stay with using either a classed paragraph, or a header tag for now.
据我所知，当前的 HTML 规范中没有规定为列表提供标题，就像表格一样。现在我会继续使用分类段落或标题标签。
<h3>Fruit</h3>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
In the future, when HTML5 gains wider adoption, you will be able to use the <legend>and <figure>tags to accomplish this slightly more semantically.
将来，当 HTML5 获得更广泛的采用时，您将能够使用<legend>和<figure>标签在语义上稍微实现这一点。
See this poston the W3C mailing list for more information.
有关更多信息，请参阅W3C 邮件列表上的这篇文章。
回答by Corey Bruyere
To ensure screen readers connect the list to an associated heading, you could use aria-labelledbyconnected to a heading with an idlike so:
为确保屏幕阅读器将列表连接到相关标题，您可以使用aria-labelledby连接到标题，id如下所示：
<h3 id="fruit-id">Fruit</h3>
<ul aria-labelledby="fruit-id">
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
As noted in a previous answer, make sure your heading level follows heading order in your document.
如上一个答案所述，请确保您的标题级别遵循文档中的标题顺序。
回答by I.devries
There is no caption-like tag for a list like a table has. So I'd just give it an <Hx>(x depending on your previously used headers).
对于像表格那样的列表，没有类似标题的标签。所以我只是给它一个<Hx>(x 取决于你以前使用的标题)。
回答by HelpNeeder
You can always use <label/>to associate label to your list element:
您始终可以使用<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>
