HTMLのheaderとfooterタグの役割と使い方！
この記事ではHTML5で新しく追加されたタグである
<header>と<footer>タグについての役割と使い方について解説します。
ウェブページを訪れるユーザーから見ると変化はないのですが、
機械から見たときに大きな役割を果たします。
<header>と<footer>とは
インターネット上に公開されているウェブページはほとんどの場合、
・本文をよりよく見せるための見出し
・本文
・著作権やライセンス情報のような後付け
という構成となっています。
例えばMicrosoft社のホームページを見てましょう。上部には
このような見出しがあり、下部には
このような関連リンク、著作権などの後付けがあるのがわかります。
この見出しの部分をHTMLの「ヘッダー」、
後付けの部分をHTMLの「フッター」と言います。
結論から言ってしまうと
<header>タグはヘッダーであることをプログラムに認識させるタグ
<footer>タグはフッターであることをプログラムに認識させるタグ
です。
では<header>や<footer>タグで
見出しや後付けに変化があるでしょうか？
次の2つのコードを比較してみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML入門</title>
</head>
<body>
<header>
<h1>見出しの部分です。</h1>
</header>
<p>本文の部分です。</p>
<footer>
<p>後付けの部分です。</p>
</footer>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML入門</title>
</head>
<body>
<h1>見出しの部分です。</h1>
<p>本文の部分です。</p>
<p>後付けの部分です。</p>
</body>
</html>この2つのコードの違いは<header>と<footer>タグが使われているかいないかです。
一見<header>～</header>や<footer>～</footer>部分に記述があるのでブラウザで実行すると違いがあるように思えます。
しかし、ブラウザで実行するとどちらも次のように表示されます。
実際にウェブページを作成するときには、
見出しの部分に画像を表示させる、
後付けの部分に関連リンクを入れる、
というような装飾をしますが、画像やリンクを入れても同じように表示されます。
人間から見ると2つのページは全く同じです。
先ほどMicrosoft社のホームページを見ましたが、ページ上部に会社のロゴやメニューがあり、下部に関連リンクや著作権についてがあれば
人間はどこがヘッダーでどこがフッターかがわかります
しかし、機械（プログラム）はどこがヘッダーでどこがフッターなのかがわかりません。
だから<header>～</header>や<footer>～</footer>を書くことで、
プログラムにウェブページの構造を認識してもらう必要があるのです。
つまり
- <header>タグはプログラムにヘッダーであることを認識させるタグ
- <footer>タグはプログラムにフッターであることを認識させるタグ
となります。
プログラムにウェブページの構造を認識してもらうことで何か良いことがあるの？
と疑問に思うかもしれません。
実はGoogleで検索したときの検索順位は
- プログラムが様々なウェブサイトからサイトの情報を収集する
- 収集したウェブサイトの情報をデータベースに登録する
- 検索されたときデータベースからGoogle独自のアルゴリズムで検索順位を計算して順番に表示する
なのでプログラムにウェブページの構造を正しく認識してもらうことは検索したとき、
自分のウェブサイトが検索上位に表れる可能性が高くなるということです。
このようにプログラムに正しく自分のウェブサイトを認識してもらうことで、検索順位を改善しようとする試みをSEOと言います。
SEOについては次の記事で解説しています。合わせて見ていってください！
<header>と<footer>の使い方
では<header>と<footer>の使い方について解説していきましょう。
まず<header>タグと<footer>タグの位置についてですが
・<header>タグは<body>タグ内の一番上に書く
・<footer>タグは<body>タグ内の一番下に書く
この書き方が定番のものとなります。
注意するべきこととして
<head>タグと<header>タグは全くの別物です。
<header>タグを<head>タグ内には書かないでください。
<header>タグと<footer>タグに何を書くの？
という疑問があると思います。基本的には次のことを記述すればよいです。
・<header>にはウェブページのタイトル・画像・ヘッダーメニューを記述する
・<footer>にはプライバシーポリシー・著作権・お問い合わせを記述する
ヘッダーメニューは大体のウェブページの上部にある次の部分です。
このページメニューがあることでホームページに戻ったり、
興味のあるページに移動したりできます。
フッター部分は個人のページの場合、著作権だけ書いてあることもあります。
しかし会社でホームページを作成するときは最低限、プライバシーポリシー・著作権・お問い合わせを記述することをおすすめします。
まとめ
この記事では<header>タグと<footer>タグの役割と使い方について解説しました。
人間の目には分からないことではありますが、
プログラムにとってはページ構造を正しく認識するうえで、非常に重要です。