HTML5 多导航标签最佳实践

Question

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

这里是例子codepen。

header-a 将所有内容包裹在 nav 标签内。

header-b 包裹菜单和菜单之间的元素 nav.

header-c 将菜单按每个 nav 包裹起来。

header-d 在每个 bar 内添加 nav 标签，将所有内容包裹在 bar.

内

这种情况下哪种方法比较好？

非常感谢。

Answer 1

我认为这是关于语义的。

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

The <nav> tag defines a set of navigation links.

Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links.

Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.

Answer 2

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

尝试查看以下来源：

有信息表明您的所有 4 个选项在语义上都是正确的。您需要考虑的是您希望如何解释导航：1) 是否应将其视为一个主菜单？那么你会想要 header-a; 2) 菜单是否应该被视为相关菜单组？那么 header-a、header-b 或 header-c 中的任何一个都可以。

我知道我还没有完全回答你的问题，但据我所知，没有直接的答案。

希望这对您有所帮助。

HTML5 多导航标签最佳实践

HTML5 multi nav tag best practices

html

nav