In HTML5, should the main navigation be inside or outside the element?

by

In HTML5, I know that <nav> can be used either inside or outside the page’s masthead <header> element. For websites having both secondary and main navigation, it seems common to include the secondary navigation as a <nav> element inside the masthead <header> element with the main navigation as a <nav> element outside the masthead <header> element. However, if the website lacks secondary navigation, it appears common to include the main navigation in a <nav> element within the masthead <header> element.

If I follow these examples, my content structure will be based on the inclusion or exclusion of secondary navigation. This introduces a coupling between the content and the style that feels unnecessary and unnatural.

Is there a better way so that I’m not moving the main navigation from inside to outside the masthead <header> element based on the inclusion or exclusion of secondary navigation?

Main and Secondary Navigation Example

<header>
    <nav>
        <!-- Secondary Navigation inside <header> -->
        <ul>
            <li></li>
        </ul>
    </nav>
    <h1>Website Title</h1>
</header>
<nav>
    <!-- Main Navigation outside <header> -->
    <ul>
        <li></li>
    </ul>
</nav>

OnlineDegrees.org is an example site that follows the above pattern.

enter image description here

Main Only Navigation Example

<header>
    <h1>Website Title</h1>
    <nav>
        <!-- Main Navigation inside <header> -->
        <ul>
            <li></li>
        </ul>
    </nav>
</header>

Keyzo.co.uk is an example site that follows the above pattern.

enter image description here

Excerpts from Introducing HTML5 — Added on 02-Feb-11, 7:38 AM

Introducing HTML5 by Bruce Lawson and Remy Sharp has this to say about the subject:

The header can also contain navigation. This can be very useful for site-wide navigation, especially on template-driven sites where the whole of the <header> element could come from a template file.

Of course, it’s not required that the <nav> be in the <header>.

If depends largely on whether you believe the site-wide navigation belongs in the site-wide header and also pragmatic considerations about ease of styling.

Based on that last sentence, it appears that Bruce Lawson—author of the chapter those excerpts are from—admits that “pragmatic considerations about ease of styling” yield a coupling between the content and the style.

5 Answers
5

Leave a Comment