我如何在HTML中用UL语义分组头部? [英] How do I semantically group a header with a UL in HTML?
问题描述
我有一个HTML文档,我希望将文本以语义形式组织到UL的头部作为标题。最初的尝试如下所示:
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:
<ul id="databases">
Databases:
<li>Microsoft SQL Server - 10+ years</li>
<li>Sybase SQL Server - 5 years</li>
<li>Oracle - 5 years</li>
</ul>
W3C验证人指出,在UL内部没有允许文本,但在LI之外。我可以将文本放在LI中,然后使用伪类:first-child在我的CSS中查找标题,但这显然不是语义上正确的方式。
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.
如何正确处理这个问题?
How do I handle this properly?
推荐答案
它不应该在第一个li中设置,因为这会假设与前面的李元素的兄弟关系,而标题在层次结构中更重要。想像屏幕阅读器等等
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
<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>
将h2替换为ah(n),具体取决于与其他标题相关的层次结构页。要在css中定位标题,只需给它一个类,如果有其他标题将共享相同的样式,例如
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 class="subHeader">Languages:</h2>
<ul id="languages">
<li>English</li>
<li>Chinese</li>
<li>French</li>
</ul>
否则给它一个id
这篇关于我如何在HTML中用UL语义分组头部?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!