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

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

Answer 1

标准很明确:

允许的父元素:

ul,ol,菜单

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

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