Question

我正在尝试在标题处编写一个带有多菜单的主题，我应该为每个主题使用多个nav标记吗？或者将它们全部包装在nav标签内？

以下是示例codepen。

header-a将所有内容包装在nav标记内。

header-b换行菜单以及nav内的菜单之间的元素。

每个header-c内的

nav换行菜单。

header-d在每个nav中添加bar标记，将所有内容包装在bar内。

在这种情况下哪种方法会好？

非常感谢你。

Answer 1

我认为这是关于语义的。

nav元素应该包含属于同一导航结构的项目。

例如：

＆＃13;

<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>

＆＃13;

请参阅this article

<nav>标记定义了一组导航链接。

请注意，并非文档的所有链接都应位于<nav>元素内。 <nav>元素仅适用于导航链接的主要块。

浏览器（例如禁用用户的屏幕阅读器）可以使用此元素来确定是否省略此内容的初始呈现。

Answer 2

似乎没有一个确切的答案，似乎正确的答案取决于你想要如何阅读网站的语义。

查看以下来源：

有些信息表明您的所有4个选项在语义上都是正确的。您需要考虑的是如何解释导航;它应该被视为一个主菜单吗？然后你会想要header-a。菜单应该被视为一组相关菜单吗？然后，header-a，header-b或header-c中的任何一个都可以使用。

我知道我没有给你一个问题的答案，但从我能解决的问题来看，没有直接的答案。

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

HTML5多导航标签最佳做法

2 个答案: