[解決済み】HTML5では、メインナビゲーションは<header>要素の内側と外側のどちらにあるべきでしょうか？

質問

HTML5では、私は、以下のことを知っています。 <nav> は、ページのマストヘッドの内側でも外側でも使用できます。 <header> 要素を使用します。セカンダリナビゲーションとメインナビゲーションの両方を持つWebサイトでは、セカンダリナビゲーションを <nav> 要素の中にあります。 <header> 要素で、メインナビゲーションは <nav> 要素で、マストヘッドの外側にあります。 <header> 要素を使用します。 しかし、ウェブサイトにセカンダリーナビゲーションがない場合、メインナビゲーションを <nav> 要素で、マストヘッド <header> 要素を使用します。

これらの例に従うと、私のコンテンツ構造は、セカンダリー・ナビゲーションを含めるか否かに基づいていることになります。これでは、コンテンツとスタイルの間に、不必要で不自然に感じられる結合が導入されてしまいます。

メインナビゲーションをマストヘッドの内側から外側に移動させない、よりよい方法はないでしょうか。 <header> 要素で、セカンダリナビゲーションを含むか含まないかに基づいていますか？

メインとセカンダリのナビゲーション例

<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 は、上記のパターンに従ったサイトの例です。

メインのみのナビゲーション例

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

キーゾー.co.jp は、上記のパターンに従ったサイトの例です。

からの抜粋 HTML5の紹介 - 02-Feb-11, 7:38 AMに追加されました。

HTML5の紹介 Bruce LawsonとRemy Sharpによるこのテーマについて、次のように語っています。

ヘッダーには、ナビゲーションを含めることもできます。これはサイト全体のナビゲーションに非常に便利で、特にテンプレート駆動型のサイトでは <header> 要素は、テンプレートファイルから来る可能性があります。

もちろん、このような場合は <nav> の中にある。 <header> .

サイトワイドナビゲーションがサイトワイドヘッダーに属すると考えるかどうかに大きく依存しますし、スタイリングのしやすさという実用的な考慮も必要です。

この最後の文章から、この抜粋の章の著者であるBruce Lawsonは、「スタイリングのしやすさに関する実用的な考慮」によって、コンテンツとスタイルの間の結合がもたらされることを認めているようです。

どのように解決するのか？

それは完全にあなた次第です。ヘッダー内に配置してもしなくても、その中の要素が内部ナビゲーション要素のみであれば（つまり、twitterやfacebookアカウントなどの外部サイトへのリンクがなければ）問題ありません。

ヘッダーに配置されることが多いのは、単にナビゲーションがそこにあることが多いからですが、決まっているわけではありません。

で詳しく紹介されています。 HTML5博士 .