グループやセクションの最後にfooterタグをつけよう!

footerタグは、グループやセクション末尾に設置する要素になります。
このタグはページ内には必須のタグとなりますので、どの様に設置して使用するのかをまとめました。

footer(フッター)タグとは?

footerタグはグループやセクションの最後になる部分を表します。
見た目の場所は以下の通り。

footerレイアウト

footerタグは1ページに必ず1つは使用する必須の項目となります。

footer要素内には何を入れたらいいの?

footer要素の中には以下のような情報が入る事が殆どです。

  • ナビゲーション(メニューボタン)
  • お問い合わせ先
  • 所在地
  • コピーライト など

footerタグの使い方

footerタグは「< footer >~< /footer >」と記載し、footerタグ内に記載された情報がfooter要素として認識されます。
設置箇所はセクションの一番下になります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>サイトのタイトル</title>
  </head>
  <body>
  
    <header>
   <h1>1番大きな見出し(他にはサイトロゴなど)</h1>
  </header>
  
      <h2>2番目に大きな見出し</h2>
      <p>h2見出しの内容文章</p>

  <footer>
   <p><small>© 2021 ikasuru.com</small></p>
   </footer>

  </body>
</html>

footerタグは複数使っていいの?

footerはセクションの最後になるタグで、1ページに複数使う事ができます。
例えば、このような形。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>サイトのタイトル</title>
  </head>
  <body>
  
    <header>
   <h1>1番大きな見出し(他にはサイトロゴなど)</h1>
  </header>
 
  <article>
      <header>
    <h1>グループの見出し</h1>
   </header>
  <section>
       <h2>2番目に大きな見出し</h2>
       <p>h2見出しの内容文章</p>
  </section>
  <footer>
   <p>セクションカテゴリー名</p>
    </footer>
  </article>

 <footer>
  <p><small>© 2021 ikasuru.com</small></p>
  </footer>

  </body>
</html>

この様にマークアップする事でfooterを複数使用する事ができます。
footerタグは絶対にページの頭に設置しなければならない訳ではなく、あくまでグループやセクションの最後なのです。

ですが、複数使えはしますが今はページ内の最後だけでいいかなと思っています。
無理やり複数使う必要はありません。
まずはページの一番下に1つ設置する考えで作っていきましょう。

footerタグのまとめ

セクションやグループの最後が無いwebサイトはありませんので、使用しない場合というのはありません。

HTMLコーディングのオススメ本

1冊ですべて身につくHTML&CSSとWebデザイン入門講座

知識ゼロから体系的に学べる!HTMLとCSSの基本。最新の技術に対応!レスポンシブ、Flexbox、CSSグリッド。手を動かしながら学べる!プロの現場で役立つテクニック。コードの知識からデザインのことまで1冊ですべて学べる!

初心者からちゃんとしたプロになる HTML+CSS標準入門

HTML&CSSの使い方が全部わかる。プロを目指すなら、最初に選ぶ本!

できるホームページ HTML&CSS入門 Windows 10/8.1/7対応

タグの理解が深まる!入力例と結果、機能がひと目でわかるからHTMLコードがすぐ身に付く。CD‐ROMに収録の画像編集ソフトでホームページを彩るロゴも作成できる!

現場のプロから学ぶ SEO技術バイブル(特典PDF付き)

セマンティックWebに対応するための構造化マークアップ。MFI時代におけるモバイル対応からAMP対応まで。検索意図・共起語を意識したコンテンツSEO。Googleの特許から紐解く被リンク・サイテーション獲得戦略。レンダリング・ネットワークの仕組みから理解する高速化技術。施策だけで終わらせないモニタリングレポート。