我如何在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屋！