关于导航的html5语义[重复]答案

【问题标题】：html5 semantics about navigations [duplicate]关于导航的html5语义[重复]
【发布时间】：2013-11-18 14:15:39
【问题描述】：

今天我想仔细看看 html5 中的 nav 元素。我在大多数网站上都看到应该使用它的方式是在里面加上一个 ul li。好吧，这不是很语义化，因为 nav 元素已经像一个列表一样。即使在 MDN 上，我也看到了使用 nav ul li 元素的示例。但是，如果只是简单的导航，里面有链接，甚至是下拉菜单呢

<nav>
    <a href="#">Some Text</a>
    <a href="#">Some Text</a>
    <a href="#">Some Text</a>
    <a href="#">Some Text</a>
    <a href="#">Some Text</a>
    <a href="#">Some Text</a>
    <a href="#">Some Text</a>
    <a href="#" id="dropdown-menu">Dropdown
        <nav class="dropdown">
            <a href="#">Some Text</a>
            <a href="#">Some Text</a>
            <a href="#">Some Text</a>
            <a href="#">Some Text</a>
            <a href="#">Some Text</a>
            <a href="#">Some Text</a>
            <a href="#">Some Text</a>
        </nav>
    </a>
</nav>

它是语义的，是错的吗？如果我使用的方式正确，为什么每个人都在导航中使用 ul li 元素？

更新：仅作为示例，我更新了主题并添加了 css 和 js Javascript

$('#dropdown-menu').on("click", function(e) {
    $('.dropdown').slideDown(100);
});

CSS

.dropdown {
    display: none; 
}

【问题讨论】：

见this SO question
现在我想在 html 中添加一个额外的元素。如果目的是让我们知道我们正在处理一个大型导航块。 :-)。

标签： html semantics nav semantic-markup

【解决方案1】：

我认为良好的做法（例如 wordpress 需要）以这种方式构建导航：

<nav>
   <ul>
      <li><a href="" title=""></a></li>
      <li><a href="" title=""></a></li>
      <li><a href="" title=""></a></li>
      <li>
         <a href="" title=""></a>
         <ul>
             <li><a href="" title=""></a></li>
             <li><a href="" title=""></a></li>
             <li><a href="" title=""></a></li>
         </ul>
      </li>
   </ul>
</nav>

总是使用 ul，这很自然 - 导航是一个列表。

【讨论】：