Question

假设我有一组链接，我可以使用<div>代替<nav>吗？

<div>
  <ul>
   <li class="head_divider">...</li>
   <li class="head_divider">Text<br />Here</li>
   <li class="head_divider">...</li>
 </ul>

两者有什么区别？他们为我提供相同的格式/答案

Answer 1

<nav>意味着更多的语义标记（让浏览器知道）这些链接不只是普通链接，它们是导航菜单。这对于辅助功能非常有用（标签，移动设备）设备，浏览器，如禁用用户的屏幕阅读器，可以使用此元素用于确定是否省略初始渲染这个内容。）和其他事情。

有关<nav>的更多参考： https://www.w3.org/TR/html51/sections.html#the-nav-element
<div>标记定义HTML文档中的分区或部分。它是一个块级元素，通常用于识别大型元素内容分组，有助于构建网页的布局并使用CSS设计。

有关<div>的更多参考：http://www.html-5-tutorial.com/div-tag.htm

在造型方面没有太大区别，

<强> <nav>

<强> <div>

Answer 2

从技术上讲，它们的工作方式相同，但对于告诉他们存在导航区域的搜索引擎。

Answer 3

我几年前做过一个完整语义HTML标记的例子，并在github上发布。

查看代码 https://github.com/samad-aghaei/Semantic-HTML5/blob/master/index.html

<nav>
<ul itemscope="itemscope" itemtype="http://schema.org/ItemPage">
    <li>
      <a itemprop="url" rel="nofollow" href="#" title="Facebook" class="icon-facebook">
      </a>
    </li>
    <li>
      <a itemprop="url" rel="nofollow" href="#" title="Twitter" class="icon-twitter">
      </a>
    </li>
    <li>
      <a itemprop="url" rel="nofollow" href="#" title="Google Plus" class="icon-gplus">
      </a>
    </li>
    <li>
      <a itemprop="url" rel="nofollow" href="#" title="LinkedIn" class="icon-linkedin">
      </a>
    </li>
    <li>
      <a itemprop="url" rel="nofollow" href="#" title="RSS Feed" class="icon-rss-1">
      </a>
    </li>
  </ul>

<nav>和<div>有什么区别？

3 个答案: