如何在HTML中使用UL语义分组标头？

Question

我有一个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>

W3C验证器指出UL内部没有允许文本,但在LI之外.我可以将文本放在LI中,然后使用伪类:first-child在我的CSS中找到"header",但这显然不是语义上正确的方法.

我该如何妥善处理？

Answer 1

它不应该在第一个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>

根据与页面上其他标题相关的层次结构,将h2换成ah(n).要在css中定位标头,只要给它一个类,如果有其他标题将共享相同的样式,例如

<h2 class="subHeader">Languages:</h2>
<ul id="languages">        
    <li>English</li>
    <li>Chinese</li>
    <li>French</li>
</ul>

否则给它一个id

Answer 2

仅供参考,HTML 3.0具有<lh>:

<ul>
    <lh>This is a list header!
    <li>Item A
    <li>Item B
    <li>Item C
</ul>

Answer 3

您可以尝试使用"定义列表"标记进行列表.你得到一个更清洁的代码.

<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>

有关定义列表的更多信息,请访问http://www.w3schools.com/tags/tag_dl.asp

Answer 4

<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>

甚至更好

<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>

请注意,h1它仅限于section,因此列表后面的内容是否属于标题数据库并不含糊.换句话说,标题在该部分范围内.