2

我网站的 h1 也是“home”链接，所以很明显我把它放在了 nav 标签中。导航中的其他链接最初放在无序列表中，如下所示：

    <nav>
      <h1><a href="#" class="active">Site Name</a></h1>
      <ul>
         <li><a href="#">Nav Item 1</a>
         <li><a href="#">Nav Item 2</a>
         <li><a href="#">Nav Item 3</a>
       </ul>
    </nav>

标准，对吧？您可以想象，在子页面上，导航保持不变，但“活动”类被应用于相关的导航项。

这就是问题所在。在移动屏幕宽度下，导航压缩到下拉菜单中，其中“活动”链接是下拉菜单上方显示的唯一链接。在 h1 是活动链接的主页上这很好，但似乎我的 CSS 在子页面上会变得非常混乱。

我注意到一些受人尊敬的前端开发人员使用没有有序/无序列表的列表项。这些人高度重视语义，所以我想知道他们可能在想......

所以我被困住了。将我的 h1 放在 ul 中似乎是错误的，但这似乎也是错误的：

    <nav>
      <li><h1><a href="#" class="active">Site Name</a></h1></li>
      <li><a href="">Nav Item 1</a></li>
      <li><a href="">Nav Item 1</a></li>
    </nav>

我知道我几乎可以通过任何方式标记 HTML 来了解我想要实现的目标，但我希望尽可能在语义上做到这一点，同时避免 CSS/JS 噩梦/或任何黑客攻击。

4

1 回答 1

8

标准很明确：

允许的父元素：

ul, ol, 菜单

应避免任何其他用途，因为浏览器很可能不支持它。

规范禁止它的事实意味着没有公认的语义，除了每个开发人员为自己使用而发明的语义。

于 2013-02-21T16:07:34.350 回答