Question

为什么我们需要一个导航菜单，当前页面明显突出显示AND页面标题（<h2>）？

为什么不将当前导航项目设为<h2>？（并按照你想要的方式存放它，也许你想让它比其他部分更大或者更大）

<h1><a href="#">Site Name</a></h1>
<ul>
    <li id="current"><h2><a href="#">Home</a></h2></li>
    <li><a href="account/">Account</a></li>
    <li><a href="about/">About</a></li>
</ul>

<div id="content">
    <!-- Content goes here. -->
</div>

这种方法的优点和缺点是什么？ Googlebot如何对待这个？

Answer 1

我认为这取决于样式的应用方式以及设计的外观。

但需要考虑一些因素：

导航不是真正的内容，标题是内容。在导航中放置真实内容会降低可用性。
这会使内容中的第一个标题为h3，我认为这不是理想的标题。
如果没有应用样式，您的设计可能看起来很糟糕。
屏幕阅读器不会很好用...阅读导航然后遇到标题。
这样的标记会让其他媒体（手机可能）的重新设计或重新设计变得更加困难，因为你会被迫将更多的风格混合在一起。

Answer 2

答案取决于页面的视觉设计。它可以工作。但我们必须看到它在视觉上是如何运作的。

但是，将页眉作为导航的一部分存在可访问性问题。如果我正在使用屏幕阅读器并跳转到页面头部，则后面的内容不是页面内容，而是剩余的导航。所以这不太可能是一个好主意。

最后，很多人现在使页面标题为h1。在上下文中，Web是以文档为中心的，因此每个文档都应该有自己独特的h1。这是一个值得商榷的立场。

Answer 3

标题开始一个部分。此标题后的所有内容（直到达到下一个相同级别或更高的标题）都可视为本节的一部分。

在您的示例中，“帐户”和“关于”链接将成为标题为“主页”的部分：

<ul>
    <li id="current"><h2><a href="#">Home</a></h2> <!-- everything after here is now in scope of the heading "Home" --> </li> 
    <li><a href="account/">Account</a></li> 
    <li><a href="about/">About</a></li>
</ul>

但这当然不适用。这就是为什么你不应该在导航中使用标题。

导航菜单标记中的页面标题h2。两只鸟，一石

3 个答案: