Should menu titles (h1, h2, h3...) be inside or outside the <nav> tag?

Question

Let's say I want to write a simple menu in HTML5.

Should I write like this:

<h1>My Menu</h1>
<h2>Submenu 1</h2>
<nav>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        ...
    </ul>
</nav>
<h2>Submenu 2</h2>
<nav>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        ...
    </ul>
</nav>

Or like this:

<nav>
    <h1>My Menu</h1>
    <h2>Submenu 1</h2>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        ...
    </ul>
    <h2>Submenu 2</h2>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        ...
    </ul>
</nav>

In other words, should the titles be inside or outside the <nav> tag?

Thanks.

Solution 1

According to the HTML5 spec, "nav" is a "section" and a section "is content that defines the scope of headings and footers." The W3C example for the nav section shows h tags in the the nav.

http://www.w3.org/TR/html5/sections.html#the-nav-element

Solution 2

h tags are for the structure of the content of the page. I wouldn't say navigation is part of the content of the page, so it doesn't make sense to me to have h tags in the navigation.

Comments

[DisgruntledGoat]

Agree with this. You can only have one <h1> per 'scope' so moving outside the nav would probably break this rule, and imply your page is titled 'My Menu'.

[Lèse majesté]

That's partly true, and prior to the introduction of nav, I would never use a heading tag for navigation menus. However, navigation menus can contain headings, which the h tags are the only semantically correct way of representing. Putting it inside of nav lets the document parser know that it's not part of the official content.

[Piers Karsenbarg]

Interesting. I still wouldn't advise putting the h1 tag in there though as it's the main heading for the page. Maybe h2.

[Marc-François]

Yes, you can use h tags for menus for example. I just didn't know if the h1 had to be inside or outside. See the link given by bogeymin: w3.org/TR/html5/sections.html#the-nav-element

[ctekse]

I found this nice reference the other day: simon.html5.org/html5-elements