SHU BLOG

BLOG NEWS ブログ

TITLE

【HTML】header・nav・footer要素の正しい使い方を分かりやすく解説!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

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

こんな方に読んでほしい

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

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

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

header要素について

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タグのヘッダー情報

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要素について

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

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

nav要素について

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要素について

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タグのフッター情報

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>

header要素、footer要素を使用するうえでの注意点

header要素、footer要素を使用するうえでの注意点

使用するうえで2点ほど注意点がありますので解説いたします。

1.header要素・footer要素を入れ子にしない

header要素の子要素にheader、footer要素は入れないようしましょう。
footer要素の子要素にheader、footer要素は入れないようしましょう。

2.装飾(レイアウト)目的では使用しない

装飾(レイアウト)だけを目的としている場合は、header、footerは使用せずdivを使用するよう
にしましょう。

まとめ

今回はこれで以上です。

POINT
  • header、footer共に複数の使用ができます。
  • headr要素に中には、見出し(h1〜h6)が含むことが多いですが、必ずしも使うルール
    はありません。
  • nav要素は主要なナビゲーションを示すことになります。
  •  header要素・footer要素を入れ子にしない。
  •  装飾(レイアウト)目的では使用しない。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top