ほんっとにはじめてのHTML5とCSS3：[17-5] ヘッダーの header、フッターの footer、連絡先の address要素

[17-5] ヘッダーの header、フッターの footer、連絡先の address要素

最終更新日：2017年11月01日　（初回投稿日：2011年07月20日）

今回は、HTML5 からの新要素 <header> <footer> についてまとめます。
また、 <address>要素は、HTML5 からちょっと役割が変わっています。

使用する要素	`<header> 〜 </header> <footer> 〜 </footer> <address> 〜 </address>`

本日のINDEX

<header>要素は「ヘッダー」の部分を囲む
<footer>要素は「フッター」部分を囲む
1. <footer>は最後に書くとは限らない
2. <footer>内にナビゲーションが入る例
<address>要素は連絡先を表します
1. <address> は <article> か <body> の連絡先情報

● 2017年10月： [17-1] 〜 [17-6] は本文を大幅に書き換えました。
初回投稿時の 2011年は HTML5はまだ策定中で、ルールが現仕様と若干異なっていました。それを今回 HTML5.1 の勧告内容に沿って修正しています。
特にこのページは、全面を header, footer, address の記事に書き換えています。

<header>要素は「ヘッダー」の部分を囲む

ヘッダーとしてまとめたい部分を<header>要素で囲んで使います。
<header>は、そのセクションの 導入部分、前置き 的な部分を表します。
ですので、タイトル・ナビゲーションなども含まれます。

<header>は「セクショニング・コンテント」に属していないので、アウトラインは作りません。
ですので、その中にある見出し要素は、<header>が終わった後も、後続のコンテンツに影響があります。

下は W3C HTML5.1 仕様書に記載されている例です。

<body>
 <header>
  <h1>Little Green Guys With Guns</h1> <!--これはサイトタイトル-->
  <nav>
   <ul>
    <li><a href="/games">Games</a>
    <li><a href="/forum">Forum</a>
    <li><a href="/download">Download</a>
   </ul>
  </nav>
  <h2>Important News</h2> <!--これはサブタイトル-->
  <p>To play today's games you will need to update your client.</p>
  <h2>Games</h2> <!--これもサブタイトル-->
 </header>
 <p>You have three active games:</p>
 …
</body>

最後の <p>要素のからの内容は（15行目〜）、すぐ上の <h2>で「Games」と名付けられた暗示的なセクションの中に含まれます。

<header>要素は同じページ内に複数使えます

<header>はページ内に複数使えます。

下の例は、<aside>要素をコラムとして使い（15行目から）、その中にも <header>を使ってコラムのタイトルをまとめています。

<body>
 <header>
  <h1>サイトタイトル</h1>
  <nav>
   <ul>
    <li>メニュー1</li>
    <li>メニュー2</li>
    <li>メニュー3</li>
   </ul>
  </nav>
 </header>
 <article>
 ...
 </article>
 <aside> <!--ここからコラムのセクションが新たに始まる-->
 <header>
  <h2>コラム</h2>
  <p>コラムのサブタイトル</p>
  </header>
  <p>...</p>
 </aside>

また、<header>を入れ子にすることもできるようです。
下記は W3C HTML5.1 仕様書に記載されていた例です。

<article>
  <header>
   <h1>Flexbox: The definitive guide</h1>
   <aside>
    <header>
     <h2>About the author: Wes McSilly</h2>
     <p><a href="./wes-mcsilly/">Contact him! (Why would you?)</a></p>
    </header>
    <p>Expert in nothing but Flexbox. Talented circus sideshow.</p>
   </aside>
  </header> 
 <p><ins>The guide about Flexbox was supposed to be here, but it
    turned out Wes wasn’t a Flexbox expert either.</ins></p>
</article>

入れ子になった <header>要素が <aside>（セクショニング・コンテント）に含まれているので、文法的に大丈夫なんだそうです。

<hgroup>要素は仕様から削除されました

HTML5 の新要素で <hgroup>要素が策定されていましたが、勧告時に削除されました。
下記のように、タイトル・サブタイトルのセットをグループ化するものでしたが...。

<!--これは hgroup を使ったNGなマークアップ-->
<header>
	<hgroup>
	<h1>ほんっとにはじめてのHTML5とCSS3</h1>
	<h2>HTML5の新要素で組んだサンプル</h2>
	</hgroup>
	<p>セクショニングのための要素を使ってページを組み立てよう！</p>
</header>

前回 [17-3] で説明しましたが、見出し要素が登場すると新しい暗示的なアウトラインが生成されます。
なので、「<hgroup>でまとめると、最上位の見出しのみイキで、他のは見出しとして認識されない」なんて設定だったんです。が、結局断念したようですw

じゃあ「サブタイトル」はどうマークアップするのか

<h1> 〜 <h6> 要素は、サブタイトルには使えません。
（見出し要素の直後に見出し要素があると、暗示的セクションができちゃうし）
ということで、サブタイトルには <p> や <span> などを使います。

さっきのソースの正しいマークアップ例は下記のようになります。

<!--これは 正しいマークアップ-->
<header>
	<h1>ほんっとにはじめてのHTML5とCSS3</h1>
	<p>HTML5の新要素で組んだサンプル</p>
	<p>セクショニングのための要素を使ってページを組み立てよう！</p>
</header>

以下は、その他の「サブタイトル」のマークアップ例です。
参考：HTML 5.1 2nd Edition: 4.13. Common idioms without dedicated elements

サブタイトルを「：（コロン）」で区切って <h1>の中に仕込んでいます。
「：」以外にも「｜（単一バー）」などでもイイですね。

<h1>ほんっとにはじめてのHTML5とCSS3：HTML5の新要素で組んだサンプル</h1>

サブタイトルを <span>で囲んで <h1>の中に仕込んでいます。

<h1>ほんっとにはじめてのHTML5とCSS3<br>
<span>HTML5の新要素で組んだサンプル<br>
セクショニングのための要素を使ってページを組み立てよう！
</span>
</h1>

これはニュースの「タイトル」と「リード」をセットにしたものだそうです。
サブタイトルと言えないような長い文章でも <header>でまとめられるんですね。

<header>
 <h2>3D films set for popularity slide</h2>
 <p>First drop in 3D box office projected for this year despite hotly 
 tipped summer blockbusters, according to Fitch Ratings report</p>
</header>

雑誌のタイトルと、その副題（というかキャッチコピーみたいな）だそうです。

<header>
 <p>Magazine of the Decade</p>
 <h1>THE MONTH</h1>
 <p>The Best of UK and Foreign Media</p>
</header>

<footer>要素は「フッター」部分を囲む

フッターとしてまとめたい部分を<footer>で囲んで使います。

<footer>には、そのセクションの コピーライト（著作権情報）・関連リンク・著者名 などが入ります。
親が <body>なら、そのページ全体のフッターになります。
親が「セクショニング・コンテント（<article> <aside> <section> <nav>）」なら、そのセクションのフッターになります。
ですので、複数の <footer>もOK。（セクションのフッターと、ページ全体のフッターがある場合とか）

また 別表、索引、付録データ、奥付、使用許諾、ライセンス情報 なども <footer> に入れます。
コンテンツ全体が「索引」のページだったら、全体が <footer>要素でもOKだそうです。

また、<header>と同様に <footer>は「セクショニング・コンテント」に属していないので、アウトラインは作りません。
ですので <footer>によって新たなセクションはできません。

<footer>は最後に書くとは限らない

普通は <footer>は、ページの最後やセクション内の1番最後に置きますが、配置位置は決まってなくて、先頭に配置しても良いそうです。

下記は W3C HTML5.1 仕様書に記載されていた例です。

<body>
 <footer><a href="../">Back to index…</a></footer>
 <div>
  <h1>Lorem ipsum</h1>
  <p>The ipsum of all lorems</p>
 </div>
 <p> A dolor sit amet, consectetur adipisicing elit, 
 sed do eiusmod tempor incididunt ut labore et dolore 
 magna aliqua…… </p>
 <footer><a href="../">Back to index…</a></footer>
</body>

最初と最後に <footer>要素がありますね。関連リンク（目次に戻る）だけのフッター。親が <body>なので、このページ全体に対するフッターです。

<footer>内にナビゲーションが入る例

これもは W3C HTML5.1 仕様書に記載されていた例です。
よく見かける「肥大フッター」だそうです。

 <footer>
  <nav>
   <section>
    <h2>Articles</h2>
    <p><img src="images/somersaults.jpeg" alt=""> Go to the gym with
        our somersaults class! …
    <a href="articles/somersaults/1">Part1</a> · 
    <a href="articles/somersaults/2">Part 2</a></p>
    <p><img src="images/kindplus.jpeg"> Tired of walking on the edge of
        a clif? …
    <a href="articles/kindplus/1">Read more...</a></p>
    <p><img src="images/crisps.jpeg"> The chips are down, now all
        that’s left is a potato…
    <a href="articles/crisps/1">Read more...</a></p>
   </section>
   <ul>
    <li> <a href="/about">About us...</a>
    <li> <a href="/feedback">Send feedback!</a>
    <li> <a href="/sitemap">Sitemap</a>
   </ul>
  </nav>
  <p><small>Copyright © 2015 The Snacker —
  <a href="/tos">Terms of Service</a></small></p>
  </footer>
</body>

画像、別記事へのリンク、キャンペーン情報など、たくさん盛り込んでますね。
こんなふうに、<footer>要素の中に <nav> や <section> を入れてもいいんですね。

<address>要素は連絡先を表します

<address>要素は HTML5から「そのHTML文書（または文書のセクション）に関する連絡先」以外の内容は入れてはいけない事になったそうです。

HTML5 より前は、住所や更新日時なども <address>内に入れてたんですが、「連絡先」しか入れられなくなりました。

下のサンプルは、メールフォームのページへのリンクを <address> で囲んでいます。

<footer>
Copyright © 
<a href="http://honttoni.blog74.fc2.com/">ほんっとにはじめてのHTML5とCSS3</a> 
All Rights Reserved.
<address>
by : <a href="http://honttoni.blog74.fc2.com/blog-entry-67.html" target="_blank">yuki★hata</a>
</address>
</footer>

メールフォームのページのほかに、問合せページ、企業サイトなら会社案内ページ等へのリンクも連絡先情報になりますね。
もちろん電話番号やメールアドレスをそのまま記載した部分も <address> で囲めます。

 <address>
  お問い合わせ・ご注文はこちら 
  0120-000-000
 </address>

<address> は <article> か <body> の連絡先情報

<address>要素は、直近の祖先にあたる <article> または <body> に対する連絡先情報になります。
今自分がいる <article> か <body> の連絡先を示すってことですね。

例えば、すぐ上の親が <footer>でも、そのさらに親が <body>なら、その <address>要素の内容は、ページ全体の連絡先です。
祖先に <article>があれば、そのコンテンツに対する連絡先になります。

祖先の <article>が入れ子になっている場合、外側の <article>内に <address>要素があるなら、その連絡先は外側の <article>のコンテンツに対するもの。内側の <article>には適用されません。

また、<address>要素は、その中に <header>、<footer>、<address>要素が入ってはいけません。

次回予告

次回は、メインコンテンツを表す <main>要素を使ってみましょう。
この <main>要素も HTML5 で新しく登場した要素です。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2017-11-01（Wed）│
投稿日：2011-07-20（Wed）│
カテゴリ：はじめてのHTML

Pagetop ↑

« next ホーム prev »

コメントの投稿