Page title h2 in navigation menu markup . Two birds, one stone

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?

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.

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.

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.