HTML5中的<nav>元素

Question

我总是试图使用新的HTML5元素，但发现自己做着像这样的事情：

<nav class="some-menu">
    <ul class="menu">
       <li>
           <a title="link to somewhere" href="the-link.php">link to somewhere</a>
       </li>
    </ul>
</nav>

如果我只是想实现同样的效果（视觉上），我可以使用以下方法：

<ul class="menu">
   <li>
       <a title="link to somewhere" href="the-link.php">link to somewhere</a>
   </li>
</ul>

更语义化的标记与臃肿的DOM相比，在这种情况下我应该包含<nav>标签吗？

编辑：

我发现在这种情况下可以使用<menu>和<li>。

<menu class="side-menu">
    <li><a title="a menu item" href="touch-my-nipples.thanks">Inappropriate Href</a>
</menu>

这将实现更语义化的标记，同时避免冗长的表达。

- JohnnyFaldo

Answer 1

这是一个好问题。更多的DOM意味着加载页面所需的时间更长，这不是很好。然而，您可以尝试同时使用两种方法。比如只需使用以下简单代码：

<nav class="menu">
  <a class="menu-item" href="...">Link 1</a>
  <a class="menu-item" href="...">Link 2</a>
</nav>

我认为一方面并没有比另一方明显更有利，但是您应该测试以查看不同的屏幕阅读器用户如何使用此选项（因为语义化标记可能有助于提高可访问性）。

- Michael Aaron Safyan

Answer 2

你可以说不包括html5标签可以提高HTML文件的可读性。

然而，为了SEO目的，使用html5标签可能有助于您的页面排名，因此如果您正在为商业网页开发，则可能需要考虑这一点。

在这种特定情况下，如果<li>的目的不是用于导航，则我怀疑您不会受到任何批评。

- Denis Tsoi

Answer 3

这不仅仅是关于代码膨胀，也别忘了无障碍性。通过使用<nav>元素，您可以告诉用户屏幕阅读器菜单在哪里。如果它只是ul.menu，将很难检测到。

就像丹尼斯提到的那样，还有SEO排名的优势。

- SteveEdson

Answer 4

"nav 元素允许您将链接分组，从而产生更具语义的标记和额外的结构，这可能有助于屏幕阅读器。"
作者: http://html5doctor.com/nav-element/

示例：

    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
      </ul>
   </nav>

使用 内部 链接进行网站导航是一个好主意

<menu> 标签表示一个无序列表的“菜单”选项或命令。 来源：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/menu

- Mateus Vahl

---

考虑到我的原始问题中<nav>项具有“menu”类 - 我认为<menu>无论如何都是更语义化的选择。 - JohnnyFaldo

如果您有内部链接（用于站点内导航的链接），请使用<nav>，这不是啰嗦，而是语义化的：），搜索引擎也会更容易找到它。<menu>更适用于像创建/编辑/更新这样的命令组。 - Mateus Vahl