我是否正确使用<nav>标签进行辅助导航？</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

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

根据规范

  

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

因此，您可以将nav用于各种菜单/导航链接。 另外，最好使用header和footer标记。

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

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

Answer 2

此菜单中至少有一个重要链接：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>