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

最終更新日:2017年10月13日  (初回投稿日:2011年07月20日)

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

使用する要素 <header> 〜 </header>
<footer> 〜 </footer>
<address> 〜 </address>
本日のINDEX
  1. <header>要素は「ヘッダー」の部分を囲む
    1. <header>要素は同じページ内に複数使えます
    2. <hgroup>要素は削除されました
    3. じゃあ「サブタイトル」はどうマークアップするのか
  2. <footer>要素は「フッター」部分を囲む
    1. <footer>は最後に書くとは限らない
    2. <footer>内にナビゲーションが入る例
  3. <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>要素が策定されていましたが、勧告時に削除されました
下記のように、タイトル・サブタイトルのセットをグループ化するものでしたが...。

<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 で新しく登場した要素です。

関連記事
この記事をはてなブックマークに追加

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.