2

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?

Adam Lynch
  • 3,341
  • 5
  • 36
  • 66

3 Answers3

1

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.

unor
  • 92,415
  • 26
  • 211
  • 360
1

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.

Jason Gennaro
  • 34,535
  • 8
  • 65
  • 86
  • #4 is something I didn't think about. About #2, I was sure the general consensus was that h1 was for site title, h2 for page title, h3 for content sections. #3 isn't a valid point to me really. – Adam Lynch Sep 15 '11 at 12:36
  • @Adam. re #2, I agree. That was my point. As a page title it should be at the top of the page...headlining the content, rather than in the nav. Otherwise, the first header tag in the page content is an `h3`. re #3, when I look at the code above in my browser - without styles applied - it is not clear that your `h2` is the page header. It just looks like one bigger item in a `ul`. – Jason Gennaro Sep 15 '11 at 12:48
  • I wouldn't be catering for people who have styles turned off – Adam Lynch Sep 15 '11 at 13:50
  • @Adam, fair enough. But part of good design is to have semantic markup that works properly under any circumstances. (Screen reader, styles off, people who add them own user styles). – Jason Gennaro Sep 15 '11 at 13:56
  • just added another consideration re future use, fyi. – Jason Gennaro Sep 15 '11 at 13:58
  • Yeah I agree but I think eventually we won't worry about people who have styles & JavaScript turned off. I understand where you're coming from. I tend to forget that a h2 is a header. What I mean is that I think of how Googlebot sees it (this is important!), not that what comes after it is therefore important too (the content after a h3 is more important than the content after a h4). About #5, I think all you'd need is #nav h2{margin:0;padding:0} and it'll transform to any media. It'll look just like the rest of the hyperlinks – Adam Lynch Sep 15 '11 at 14:01
  • 1
    @Adam - h1 should be for page title - here's some discussions on that (including accessibility issues and also the W3C recommendation: http://stackoverflow.com/questions/268475/h1-in-article-page-site-title-or-article-title http://www.accessifyforum.com/viewtopic.php?t=11010 And for SEO, the same is true. If you have every H1 as your site title, then your pages will all appear to be the same topic. – Charles Boyung Sep 15 '11 at 15:18
1

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.

DA.
  • 39,848
  • 49
  • 150
  • 213
  • about "using a screen reader and jump to the page head", is that a function within screen readers to "jump to the page head"? How does the screen reader know whether to jump to the h1 or h2? I always put in a hidden "Skip to Content" link just for people using screen readers. If I have one of those, is your point still valid? And why? I think it's valid if the person, using the screen reader, is reading through the navigation I guess. I agree with your last point (sometimes it does depend on the type of site though) – Adam Lynch Sep 15 '11 at 14:06
  • Yes, screen readers allow users to navigate pages via `h*` tags. A skip to content link would definitely help. – DA. Sep 15 '11 at 14:27