Question

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

    <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噩梦/或任何黑客攻击。 / p>

Answer 1

The standard is clear：

允许的父元素：

ul，ol，menu

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

规范禁止它的事实意味着没有可接受的语义，除了每个开发者为自己使用而发明的语义。

<li>没有<ol>或<ul>？</ul> </ol> </li>的语义意义

1 个答案: