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

发布于 2024-12-04 17:43:34 字数 624 浏览 3 评论 0原文

为什么我们需要一个导航菜单,其中当前页面明显突出显示并带有页面标题(

)?

为什么不将当前导航项设为

? (并按照您想要的方式存储它,也许您想让它比其他的稍微大一点或其他什么)

<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 会如何处理这个问题?

Why do we need a navigation menu with the current page obviously highlight AND a page title (<h2>)?

Why not make the current navigation item the <h2>? (and store it however you want, maybe you want to make it bigger than the rest slightly or whatever)

<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>

What are the pros and cons of this approach? Also how would Googlebot treat this?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

梦冥 2024-12-11 17:43:34

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

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

最后,现在很多人将页眉设为 h1。在网络以文档为中心的背景下,这是有道理的,因此每个文档都应该有自己独特的 h1。这是一个值得商榷的立场。

The answer depends on the visual design of the page. It could work. But we'd have to see how it works visually.

There are accessibility issues with making the page header part of the navigation, though. If I'm using a screen reader and jump to the page head, the immediate content afterwords isn't the page content, but leftover navigation. So that's not likely a good idea.

Finally, lots of folks now make the page header h1. It makes sense in the context that the web is document-centric, and therefore each document should have its own unique h1. It's a debatable stance.

自控 2024-12-11 17:43:34

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

但有一些注意事项:

  1. 导航并不是真正的内容,标题才是内容。将真实内容放在导航中会降低可用性。

  2. 这将使内容中的第一个标头成为 h3,我认为这并不理想。

  3. 如果没有应用样式,您的设计可能会看起来很奇怪。

  4. 屏幕阅读器不太适合这种情况...阅读导航,然后遇到标题。

  5. 像这样的标记会使重新设计或重新利用其他媒体(可能是移动设备)变得更加困难,因为您将被迫组合更多样式。

I think this depends on how the styles are applied and what the design looks like.

A few considerations though:

  1. navigation is not really content and a title is content. Placing real content in the nav reduces usability.

  2. this would make the first header in the content an h3, which I don't think is ideal.

  3. if there are no styles applied, your design would probably look wonky.

  4. screen readers would not do well with this... reading navigation and then encountering a title.

  5. markup like this would make redesign or re-purposing for another media (mobile maybe) more difficult, as you would be forced to hack together more styles.

烟沫凡尘 2024-12-11 17:43:34

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

在您的示例中,链接“帐户”和“关于”将是标题为“主页”的部分的一部分:

<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>

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

A heading starts a section. Everything following this heading (until the next same-level or higher heading is reached) can be considered part of this section.

In your example, the links "Account" and "About" would be part of the section titled "Home":

<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>

But this does not apply, of course. So that’s why you shouldn’t use a heading inside of the navigation.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文