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>

在没有详细程度的情况下实现更多语义标记

Answer 1

这是一个很好的问题。更多DOM ==更多时间加载页面，这是不好的。但是，您可以尝试使用两者的组合。如何简单地做这样的事情：

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

我不认为一方面有一个巨大的好处，尽管你应该测试看看这对不同的屏幕阅读器用户是如何出现的（因为可访问性可能是语义标记的好处）。

Answer 2

你可以说，不包括html5标签会增加你的html文件的可读性。

但是，对于搜索引擎优化目的，使用html5标签可能有助于您的网页排名，因此如果您正在开发商业网页，这可能是一个考虑因素。

在这个特殊情况下，如果<li>的目的不是用于导航，那么我怀疑你会不会受到批评。

Answer 3

这不仅仅是关于代码膨胀，也不要忘记可访问性。通过使用<nav>元素，您可以告诉用户的屏幕阅读器菜单所在的位置。很难检测到它是否只是ul.menu。

正如丹尼斯所提到的，搜索引擎优化排名也有优势。

Answer 4

＆＃34;允许您将链接组合在一起的元素，从而产生更多语义标记和可能帮助屏幕阅读器的额外结构＆＃34;
通过：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>标记 HTML元素表示＆＃34;＆＃34;菜单＆＃34;＆＃34;＆＃34;＆＃34;＆＃34;＆＃34;＆＃34;＆＃34;＆＃34;＆＃34;＆＃34;＆＃34; 选项或命令。通过：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu

HTML5 <nav>元素</nav>

4 个答案: