1

我正在构建一个 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>元素而不是将其包装成 a <nav>，因为在规范中，它说这必须是某种主要的 navigation，就我而言，我不确定是否是这种情况，因为这些链接是'与将在网站上找到的主要内容并不真正相关。

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

谢谢！

4

2 回答 2

0

您在此菜单中至少有一个重要链接：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>
于 2013-06-27T08:51:11.713 回答
0

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

根据规范

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

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

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

header {
    /*style header*/
}
nav {
    /*style navigation*/
}
于 2013-06-27T08:46:33.460 回答