【HTML】header・nav・footer要素の正しい使い方を解説

シュウ

今回は「【HTML】header・nav・footer要素の正しい使い方を分かりやすく解説!」
についての解説になります！

こんな方に読んでほしい

HTML5を学び始めた方へ
header・nav・footerの使い方について学びたい方へ
今回はheader・nav・footer要素について記事を書いております

上の図のように、header・nav・footer要素とはセクションの情報を示すタグになります。

主なHTML5タグ

section　
解説の記事ありますよ
sectionタグは章や節といったまとまりを示すために使用します。
main　
解説の記事ありますよ
mainタグとはHTML文書のメインコンテンツを示します。
article　
解説の記事ありますよ
articleタグとはHTML文書の独立した記事の箇所を示します。
aside　
解説の記事ありますよ
asideタグとは余談・補足の情報を示します。

[記事の内容]

header要素について

header要素とは
「ロゴ」や「サイトのメインタイトル」、「ナビゲーション（目次）」、「検索フォーム」など関連する内容を記述できます。

ページのヘッダーとして使用する

ページのヘッダーとして使用したい場合は、body〜/bodyの中にHMLを記述するように
しましょう。

ページのヘッダーとして使用する場合

<body>

 <!--header-->
 <header>
  
  <h1>ロゴなど</h1>
  <nav>
   <ul>
    <li>リスト01</li>
    <li>リスト02</li>
    <li>リスト03</li>
  </ul>
  </nav>

 </header>
 <!--header ここまで-->

</body>

ポイント01
headr要素に中には、見出し(h1〜h6)が含むことが多いですが、必ずしも使うルール
はありません。

articleタグのヘッダー情報として使用する

header要素は、sectionやarticleなどの各セクションに対しても使用が可能になります。

articleタグのヘッダー情報

<body>
 <article>

  <!--header-->
  <header>
   <h1>【Webデザイン】配色のパターンについて</h1>
   <p>段落「テキストが入ります」</p>
  </header>
  <!--header ここまで-->

 </article>
</body>

この場合は一番近いセクションはarticleになりますので、articleのヘッダーの扱いになります。
主に記事のタイトルや記事の説明文、公開日が含まれます。

ポイント02
headr要素は複数の使用が可能です。
ですが、個人的な意見になりますがheadr要素は複数の使用はせず、このような場合はsectionを使用したほうが管理しやすいです。

<body>
 <article>

  <!--sectionに変更-->
  <section>
   <h1>【Webデザイン】配色のパターンについて</h1>
   <p>段落「テキストが入ります」</p>
  </section>
  <!--section ここまで-->

 </article>
</body>

nav要素について

nav要素とは主要なナビゲーションを示すことになります。
ここでは主要とサブ的な役割に要点をおき解説していきます。

ポイント03
要素とはヘッダーのナビゲーションを示します。
サブ的な役割とはフッターのナビゲーションを示します。

nav要素について

<body>
<!--header-->
<header>
  <h1>ロゴなど</h1>
  <!--主要 ナビゲーション-->
  <nav>
   <ul>
    <li>リスト01</li>
    <li>リスト02</li>
    <li>リスト03</li>
  </ul>
  </nav>
</header>
<!--header ここまで-->  

<!--footer-->
<footer>
   <!--サブ的 ナビゲーション-->
   <ul>
    <li>リスト01</li>
    <li>リスト02</li>
    <li>リスト03</li>
  </ul>
</footer>	
<!--footer ここまで-->  	  
</body>

ここでは、header要素にはnavタグを使用し、footer要素にはulタグを使用しています。
主要ではないナビゲーションには使用しないようにしましょう。

footer要素について

footer要素とは「お問い合わせ先」や「ナビゲーション(サブ)」、「コピーライト」など関連する内容を
記述できますすることができます。

ページのフッターとして使用する

ページのフッターとして使用したい場合は、body〜/bodyの中にHMLを記述するように
しましょう。

ページのフッターとして使用する場合

<body>

 <!--footer-->
 <footer>
   <ul>
    <li>リスト01</li>
    <li>リスト02</li>
    <li>リスト03</li>
  </ul>
  <p>アクセス情報</p>
　<small>Copyright</small>
 </footer>
 <!--footer ここまで-->

</body>

ポイント04
関連文書へのリンク、著作権などの情報も含まれます。
またaddressタグを使用し作者の連絡先情報の記載もできます。

articleタグのフッター情報として使用する

header要素と同様、footer要素にも、sectionやarticleなどの各セクションに対しても使用が可能に
なります。

articleタグのフッター情報

<body>
 <article>
  <p>記事に本文のテキスト</p>

  <!--footer-->
  <footer>
   <p>著者:SHU</p>
   <address>○○○○○○○○○○.com</address>
  </footer>
  <!--footer ここまで-->

 </article>
</body>

この場合は一番近いセクションはarticleになりますので、articleのフッターの扱いになります。
主に記事の著者やお問い合わせ先、参考文献へのリンクなどが含まれます。

ポイント05
footer要素は複数の使用が可能です。
ですが、個人的な意見になりますがfooter要素は複数の使用せず、このような場合はdivを使用したほうが管理しやすいです。

<body>
 <article>
  <p>記事に本文のテキスト</p>

  <!--div-->
  <div>
   <p>著者:SHU</p>
   <address>○○○○○○○○○○.com</address>
  </div>
  <!--div ここまで-->

 </article>
</body>