Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.


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.

share|improve this question
add comment

2 Answers

up vote 8 down vote accepted

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

share|improve this answer
    
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'. –  DisgruntledGoat Dec 20 '10 at 13:43
    
Thank you! Very useful link! –  Marc-François Dec 20 '10 at 20:01
    
I found this nice reference the other day: simon.html5.org/html5-elements –  bogeymin Jan 11 '11 at 11:31
add comment

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.

share|improve this answer
    
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. –  Lèse majesté Dec 20 '10 at 14:48
    
Interesting. I still wouldn't advise putting the h1 tag in there though as it's the main heading for the page. Maybe h2. –  Piers Karsenbarg Dec 20 '10 at 15:51
    
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 –  Marc-François Dec 20 '10 at 20:02
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.