HTML5语义化结构的导航栏

10

在考虑语义的情况下,我应该如何编写我的导航栏?

有人建议将所有内容嵌套在header中,然后将链接嵌套在nav中,但我觉得这不是正确的做法。

<header>
<h3>Developer's Blog</h3>
    <nav>
        <a href="#">About</a>
        <a href="#">Contact</a>
        <a href="#">Press</a>
    </nav>
</header>

或者

<nav>
<h3>Developer's Blog</h3>
    <div>
        <a href="#">About</a>
        <a href="#">Contact</a>
        <a href="#">Press</a>
    </div>
</nav>

哪个是正确的?


1
在后者中,你的h3是导航部分的标题。这是你想要的吗? - Alohci
这只是一个例子,我可能会使用h1和较小的字体大小。 - macbem
1
在语义方面,那没有任何区别。 - Alohci
1个回答

17

nav元素当然是导航菜单的正确选择。

它内部的任何标题元素(h1-h6)都用于导航菜单本身,而不是页面。例如“导航菜单”。但如果这是唯一的导航菜单,则通常不需要为其添加标题。

你可能想在nav内使用ul元素,并为每个导航链接使用li元素。通过使用这样的块级元素,没有CSS支持的用户代理(例如文本浏览器)将每行显示一个链接;而当前的链接则会在同一行中显示。并且通过使用列表,屏幕阅读器用户有更多选项来导航菜单。

对于nav是否应该成为body-header的一部分无法一般性回答。两种方式都是可行的;这是标记选择的更加主观的领域之一。

因此,典型/常见站点范围nav的HTML5标记应为:

<nav>
  <ul>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
    <li><a href="/press">Press</a></li>
  </ul>
</nav>

没有人会使用文本浏览器,我对此非常确定。那么h1元素怎么样?我应该如何实现它?这是一个典型的导航栏,左侧有标志,右侧有链接。 - macbem
@noczesc:这取决于 h1 的用途。如果它是站点名称(例如,标志),则不应该是 nav 元素的一部分。对于该标题,最近的部分应该是 body 元素。如果您想要一个导航标题(例如,“导航”),那么只需将其放置在 nav 中的任何位置即可。 - unor
让我举个例子 - 我想要的是 http://prntscr.com/apx558。 - macbem
@noczesc:如果你指的是“开发者博客”:这似乎是网站名称,因此应该在body部分根中是一个h1。不要将其放置在nav中。因此,与该部分相关的元素将是:<body><h1>开发者博客</h1> <nav></nav> <article><h2>IT团队:奢侈品还是必需品?</h2></article> </body> - unor

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接