Question

我有一个菜单项链接列表，其中包含描述菜单的标题。这个菜单向左浮动，以减少标记我已使标题成为ul的一部分，因此它很容易浮动。

E.g

<ul>
    <li class="heading">My Title</li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
</ul>

我应该做一些特别的事情来分开标题吗？添加wai-aria？搜索引擎是否有可能混淆？

它本身在语义上似乎不正确。

Answer 1

根据工作草案Using WAI-ARIA in HTML，li元素可能有各种角色，但heading不在其中。所以不，你不应该使用ARIA属性将列表项声明为标题。

因此，如同@JamesDonnelly所建议的那样，将标题设置为列表前的单独标题元素更合适，尽管您需要根据整体结构选择标题的级别。

（搜索引擎可能不在乎。）

（这不是关于语义而是关于结构。语义是关于意义的，并且将元素声明为标题并不描述其含义，只描述它与结构或其角色的关系。）

Answer 2

我认为将标题与列表分开（作为链接列表而不是链接和标题列表）在语义上更正确。但是，我不知道这会对搜索引擎产生什么影响。但这不应该使造型变得更加困难：

<div>
    <h4>My Title</h4>
    <ul>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
    </ul>
</div>

如果您希望它们显示为内联，您可以简单地：

div h4, div ul, div ul li { display:inline-block; }
div ul { list-style-type:none; padding:0; }

JSFiddle example

列表标题的咏叹调标签，语义正确吗？

2 个答案: