我不使用 <nav> 标签进行辅助导航是否正确？

Question

我正在构建一个 Wordpress HTML5 模板，我想知道我的标题导航结构是否正确。

正如您在屏幕截图中看到的那样，我有一个“主”菜单（音乐/艺术/设计...），右上角还有另一个“辅助”菜单（提案/宣传...）。我担心的是最后一个。这是我选择的 HTML：

<div class="header-nav grid_6">
  <ul id="menu-top-menu" class="clearfix">
    <li id="menu-item-217" class="menu-item menu-item-type-custom menu-item-object-custom first-menu-item menu-item-217"> <a href="http://#">A propos</a> </li>
    <li id="menu-item-218" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-218"> <a href="http://#">Publicité</a> </li>
    <li id="menu-item-219" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-219"> <a href="http://#">Partenaires</a> </li>
    <li id="menu-item-220" class="menu-item menu-item-type-custom menu-item-object-custom last-menu-item menu-item-220"> <a href="http://#">Contact</a> </li>
 </ul> 
</div>

如您所见，它非常基础。我决定只使用<ul> 元素而不是将其包装到<nav> 中，因为in the specs, it says that must be some kind of major navigation，就我而言，我不确定是否是这种情况，因为这些链接与将在网站上找到的主要内容。

如果我错了，谁能告诉我？

谢谢！

Answer 1

此菜单中至少有一个重要链接：contact。因此我会使用这种模式，加上另一个nav 标签：

<header class="container">

    <div class="grid_6">
        <h1>KORE</h1>
        <p id="baseline">Wordpress HTML 5 responsive boilerplate based on 996css grid</p>
    </div>
    <nav class="grid_6">
        <a href="">À propos</a>
        <a href="">Publicité</a>
        <a href="">Partenaires</a>
        <a href="">Contact</a>
    </nav>

    <div class="clear"></div>

    <nav class="grid_12">
        <a href="">Musique</a>
        <a href="">Art</a>
        <a href="">Design</a>
        <a href="">Lifestyle</a>
        <a href="">Podcasts</a>
        <a href="">Sortir</a>
    </nav>

</header>

Answer 2

您应该使用nav 标记进行导航。

根据规范

nav 元素代表文档的一部分，它链接到其他文档或文档本身的部分；也就是一段导航链接。

因此，您可以将nav 用于各种菜单/导航链接。 使用header 和footer 标签也是一个好主意。

使用nav 和header 标签后，您可以直接在CSS 中使用这些标签来减少类的数量，如下所示。

header {
    /*style header*/
}
nav {
    /*style navigation*/
}