ヘッダを作る時に<nav>と<header>で違いは？

Question

初歩的な質問で恐縮です。

bootstrapでヘッダを実装しようと思いますが、<nav>でも<header>でも作れる事に気付きました。
何か違い、使い分け等があるのでしょうか？

<nav class="navbar navbar-default">
 ・・・
</nav >

<header class="navbar navbar-fixed-top navbar-inverse">
 ・・・
</header>

Answer 1

<nav>: ナビゲーションセクション要素

現在の文書内の他の部分や他の文書へのナビゲーションリンクを提供するためのセクションを表します。ナビゲーションセクションの一般的な例としてメニュー、目次、索引などがあります。

<header>

導入的なコンテンツ、ふつうは導入部やナビゲーション等のグループを表します。見出し要素だけでなく、ロゴ、検索フォーム、作者名、その他の要素を含むこともできます。

意味合いとしてはこんな感じ。

Bootstrap的にはタグを限定していないので同じレイアウトが実現できるだけの話です。

.navbar {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}

Comments

[pecchan]

有難う御座います。
なるほど、タグを限定してない。
→試しにdivに変えてもイケました。

[m.ts10806]

回答に引用してますが、意味合い的にはheaderはnavの上位要素だと解釈できます。
タグを限定してない、についてはこれも回答にBootstrapのコードを引用しています。

[pecchan]

有難う御座います。
>意味合い的にはheaderはnavの上位要素だと解釈できます。
これ大事ですね！

[m.ts10806]

あくまで「解釈」です。事実とは異なる可能性があります。

[pecchan]

なるほど。実務経験ないので大変参考になります。

[m.ts10806]

困ったときは公式を見る癖をつけると良いと思います。

Answer 2

<nav>でも<header>でも作れる事に気付きました

これが「同じ表示になった」という意味でならその通りです。
bootstrap(というかCSS)の指定がclass="xxxxx"の部分を指しているためです。

<nav>と<header>については、それぞれ名前が表す通り「ナビゲーション」と「ヘッダー」で若干意味が異なります。

• <nav> | HTML5タグリファレンス
• <header> | HTML5タグリファレンス

Comments

[pecchan]

有難う御座います。
あ、そうです。同じ表示になったので気になった次第です。
なるほど、CSSの指定なんですね。

Answer 3

html4より前まで、従来では<header>を使用してヘッダーを作成しておりましたが
html5が登場してからはそれ専用の要素として<nav>が登場し区別がしやすくなったというものとなります。
規則性を重視する目的の要素であり、どちらを使用するのも問題なくヘッダーを作る事が出来ます。
またSEO対策としても加点の対象になるでしょう。

以下のURLが詳しく解説をしております。
5分でわかる！ ここが変わったHTML5 レイアウト要素編

Comments

[pecchan]

有難う御座います。
そういう経緯があったのですね。
html5移行は使い分け意識したが良さそうですね^^

[miyabi_pudding]

> html4より前まで、従来では<header>を使用してヘッダーを作成しておりましたが

違います。
header要素もHTML5から勧告された要素です。

[ex025]

miyabi_takatsukさんも書いていますが、headerはHTML5から仕様書に書かれている要素です。
HTML5ならヘッダーはheader要素を用いて、navはサイドバーやヘッダー内のメニューなどのために使用するべきです

[pecchan]

miyabi_takatsukさん、
Chiba_mさん
有難う御座います。

header要素を用いて、ヘッダ内のナビメニューはnavを用いることにします。