如何在 HTML 中对带有 UL 的标头进行语义分组？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2417891/
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 do I semantically group a header with a UL in HTML?
提问by Yes - that Jake.
I have an HTML document where I would like to semantically group text to the head of a UL as a "header." The initial attempt looks like this:
我有一个 HTML 文档，我想在其中将文本按语义分组到 UL 的头部作为“标题”。最初的尝试如下所示：
<ul id="databases">
Databases:
<li>Microsoft SQL Server - 10+ years</li>
<li>Sybase SQL Server - 5 years</li>
<li>Oracle - 5 years</li>
</ul>
The W3C validator points out that there's no text allowed inside a UL, but outside a LI. I could put the text inside an LI, then use the pseudo-class :first-child to find the "header" in my CSS, but this is clearly not the semantically correct way.
W3C 验证器指出在 UL 内不允许有文本，但在 LI 之外。我可以将文本放在 LI 中，然后使用伪类 :first-child 在我的 CSS 中查找“标题”，但这显然不是语义正确的方法。
How do I handle this properly?
我该如何正确处理？
回答by Nick Allen
It should not be set in the first li because this would assume a sibling relationship to the preceding li elements whereas the header is more important in the hierarchy. Imagine screen-readers etc
它不应该设置在第一个 li 中，因为这将假定与前面的 li 元素有兄弟关系，而标题在层次结构中更重要。想象一下屏幕阅读器等
<h2>Databases:</h2>
<ul id="databases">
<li>Microsoft SQL Server - 10+ years</li>
<li>Sybase SQL Server - 5 years</li>
<li>Oracle - 5 years</li>
</ul>
Swap out the h2 for a h(n) depending on the hierarchy in relation to the other headers on the page. To target the header in css just give it a class if there are other headers that will share the same style e.g.
根据与页面上其他标题相关的层次结构，将 h2 换成 ah(n)。如果有其他标题将共享相同的样式，则要在 css 中定位标题，只需给它一个类
<h2 class="subHeader">Languages:</h2>
<ul id="languages">
<li>English</li>
<li>Chinese</li>
<li>French</li>
</ul>
Otherwise give it an id
否则给它一个id
回答by Pup
回答by Nima Foladi
You could try the "Definition List" tag for your listing purposes. You get a much cleaner code.
您可以尝试将“定义列表”标签用于您的列表目的。你会得到一个更干净的代码。
<dl>
<dt>Databases</dt>
<dd>Microsoft SQL Server - 10+ years</dd>
<dd>Sybase SQL Server - 5 years</dd>
<dd>Oracle - 5 years</dd>
<dt>Second heading</dt>
<dd>Item 1</dd>
<dd>Item 2</dd>
<dd>Item 3</dd>
</dl>
More information on Definition List here http://www.w3schools.com/tags/tag_dl.asp
有关定义列表的更多信息，请访问 http://www.w3schools.com/tags/tag_dl.asp
回答by chharvey
<section>
<h1>Databases:<h1>
<ul>
<li>Microsoft SQL Server - 10+ years</li>
<li>Sybase SQL Server - 5 years</li>
<li>Oracle - 5 years</li>
</ul>
</section>
or even better
甚至更好
<section>
<h1>Databases:</h1>
<dl>
<dt>Microsoft SQL Server</dt> <dd>10+ years</dd>
<dt>Sybase SQL Server</dt> <dd>5 years</dd>
<dt>Oracle</dt> <dd>5 years</dd>
</dl>
</section>
Note the h1is confined to the section, so it's not ambiguous as to whether the content following the list belongs to the heading Databases. In other words, the heading is scopedwithin the section.
注意 theh1仅限于 the section，因此列表后面的内容是否属于标题Databases并不含糊。换句话说，标题是作用域的区间内。
回答by fbas
here's an alternate answer:
这是一个替代答案：
<ul id="databases">
<li style="list-style:none"><strong>Databases:</strong></li>
<li>Microsoft SQL Server - 10+ years</li>
<li>Sybase SQL Server - 5 years</li>
<li>Oracle - 5 years</li>
</ul>
the advantage of this is that you can use several of these "headers" within your UL without breaking them up into separate UL's and the default white space that causes (or using CSS to eliminate the white space...)
这样做的好处是你可以在你的 UL 中使用这些“标题”中的几个，而不必将它们分解成单独的 UL 和导致的默认空白（或使用 CSS 来消除空白......）
回答by Hymanbot
Or nest your lists like so
或者像这样嵌套你的列表
<ul>
<li>Databases</li>
<li>
<ul>
<li>Microsoft SQL Server - 10+ years</li>
<li>Sybase SQL Server - 5 years</li>
<li>Oracle - 5 years</li>
</ul>
</li>
</ul>
回答by daiscog
As per my answer to this question, I find the HTML5 figureand figcaptionelementsmost appropriate:
根据我对这个问题的回答，我发现 HTML5figure和figcaption元素最合适：
<figure>
<figcaption>Databases</figcaption>
<ul>
<li>Microsoft SQL Server - 10+ years</li>
<li>Sybase SQL Server - 5 years</li>
<li>Oracle - 5 years</li>
</ul>
</figure>
Or alternatively 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;
}
回答by Roman
Maybe something like this:
也许是这样的：
<div>
<span>Databases:<span>
<ul id="databases">
<li>Microsoft SQL Server - 10+ years</li>
<li>Sybase SQL Server - 5 years</li>
<li>Oracle - 5 years</li>
</ul>
</div>
