5


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.

12

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

  • 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
  • I found this nice reference the other day: simon.html5.org/html5-elements – bogeymin Jan 11 '11 at 11:31
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.

  • 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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