HTML5多导航标签最佳实践

我认为这是关于语义的。

A. nav 元素应该包装属于同一导航结构的项。

例如:

<nav id="topNav">
  <ul>
    <li><a>Home</a>
    </li>
    <li><a>About</a>
    </li>
    <li><a>Contact</a>
    </li>
  </ul>
</nav>

<nav id="sideNav">
  <ul>
    <li>Products</li>
    <ul>
      <li><a>Oranges</a>
      </li>
      <li><a>Apples</a>
      </li>
      <li><a>Pears</a>
      </li>
    </ul>
  </ul>
</nav>

<nav id="socialNav">
  <ul>
    <li><a>Facebook</a>
    </li>
    <li><a>Twitter</a>
    </li>
    <li><a>LinkedIn</a>
    </li>
  </ul>
</nav>

看见 this article

这个 <nav> 标签定义了一组导航链接。

请注意,并非文档的所有链接都应该位于 <导航> 要素这个 <导航> 元素仅用于 导航链接 .

浏览器(如针对残疾用户的屏幕阅读器)可以使用此元素来确定是否省略此内容的初始呈现。

这似乎没有确切的答案。相反,正确的答案取决于您希望如何阅读网站的语义。

尝试查看以下来源:

• http://html5doctor.com/nav-element/
• https://stackoverflow.com/questions/14100279/html5-semantics-for-multiple-nav- elements
• http://w3bits.com/css-responsive-nav-menu/

有信息表明,所有4个选项在语义上都是正确的。您需要考虑的是您希望如何解释导航:1)它应该被视为一个主菜单吗?那么你会想要 header-a ; 2) 菜单应该被视为一组相关菜单吗?然后 标题-a , header-b 或 header-c 将起作用。

我知道我并没有确切地回答你的问题,但从我能得出的结果来看,并没有直接的答案。

希望这在某种程度上有所帮助。