このページの本文へ

HTML5セクション要素のまとめ

2011年11月02日 13時09分更新

浜 俊太朗/ライブドア

  • この記事をはてなブックマークに追加
本文印刷

その他のセクションに関連した要素

 セクションを明示する要素ではありませんが、セクションに関連するそのほかの要素を解説します。

header要素

  • カテゴリー:フローコンテンツ
  • この要素が使える文脈:フローコンテンツが予想される場所
  • コンテンツモデル:フローコンテンツですが、header要素・footer要素は含められません

 header要素は、セクションのヘッダーを表します。通常は見出し要素が入ることを想定されていますが、必須ではありません。

 ヘッダーというと、ページの上部にある「いわゆるヘッダー」を想像しがちですが、header要素の用途はそれだけではありません。ページ上部のヘッダーを「ページヘッダー」と呼ぶとしたら、セクションごとのヘッダーである「セクションヘッダー」も存在します。

 以下に具体例を示します。

ページヘッダーとセクションヘッダーの例


<body>
 <header>
  <h1><img src="/img/logo.png" alt="hamashun ブログ" /></h1>
  <p>hamashun のブログです</p>
 </header>
 <article>
  <header>
   <h1>今日は僕の誕生日です!</h1>
   <time>2011-09-09</time>
  </header>
  <p>みなさんどう思いますか?</p>
  <p>実は僕は飯屋なんです。</p>
 </article>

 body要素直下のheader要素がページヘッダーで、article要素直下のheader要素がセクションヘッダーです。

 header要素では、以下のようにnav要素を含むことがよくあります。


<header>
 <h1>hamashun.com</h1>
 <nav>
  <ul>
  <li><a href="/home/">Home</a></li>
  <li><a href="/about/">About</a></li>
  <li><a href="/blog/">Blog</a></li>
  <li><a href="/link/">Link</a></li>
  </ul>
 </nav>
</header>

footer要素

  • カテゴリー:フローコンテンツ
  • この要素が使える文脈:フローコンテンツが予想される場所
  • コンテンツモデル:フローコンテンツですが、header要素・footer要素は入れられません

 footer要素は、セクションのフッターを表します。多くの場合、セクションの最後に登場しますが、位置は特に指定されていませんので、セクションのどこにでも記述できます。

 footer要素もheader要素と同じく、ページフッターとセクションフッターがあり得ます。


 <article>
  <header>
   <h1>今日は僕の誕生日です!</h1>
  </header>
  <p>みなさんどう思いますか?</p>
  <p>実は僕は飯屋なんです。</p>
  <footer>
   <time>2011-09-09</time>
   <p>投稿者:hamashun</p>
  </footer>
 </article>
<footer>
 <ul>
  <li><a href="/home/">Home</a></li>
  <li><a href="/about/">About</a></li>
  <li><a href="/blog/">Blog</a></li>
  <li><a href="/link/">Link</a></li>
 </ul>
 <p><small>&copy; 2006 hamashun.com</small></p>
</footer>
</body>

 body要素直下のfooter要素がページフッターで、article要素直下のfooter要素がセクションフッターです。

 また、最近よく見かけるページフッターとして、ナビゲーションやプロフィールなどが記述され、「コンテンツとしての役割を持つフッター」があります。これもfooter要素を使ってマークアップできます。


<footer>
 <nav>
  <section>
   <h1>最新記事</h1>
   <ul>
    <li><a href="#">今日は僕の誕生日です!</a></li>
    ...省略...
   </ul>
  </section>
  <section>
   <h1>月別アーカイブ</h1>
   <ul>
    <li><a href="#">2011-09</a></li>
    ...省略...
   </ul>
  </section>
  <section>
   <h1>カテゴリーアーカイブ</h1>
   <ul>
    <li><a href="#">日記</a></li>
    ...省略...
   </ul>
  </section>
 </nav>
 <section>
  <h1>プロフィール</h1>
  <p>はじめまして...</p>
 </section>
 <p><small>&copy; 2006 hamashun.com</small></p>
</footer>

address要素

  • カテゴリー:フローコンテンツ
  • この要素が使える文脈:フローコンテンツが予想される場所
  • コンテンツモデル:フローコンテンツですが、ヘッディングコンテンツ・セクショニングコンテンツ・header要素・footer要素は入れられません

 address要素は、「直近の祖先のarticle要素・body要素によるセクション」に対する連絡先を表します。直近のセクションがbody要素によるセクションの場合は、文書全体に対する連絡先となります。一方、複数人でブログを運営している場合は、記事(article要素)ごとにaddress要素を置くことで、それぞれの記事に対する連絡先となります。

ポイント

 「body要素やarticle要素によるセクション」の子孫であればよく、body要素やarticle要素の直下に記述することは必須ではありません。たとえば、body要素の直下にfooter要素があり、その中にaddress要素を記述しても、body要素に対する連絡先となります。

文書全体に対しての連絡先の例


<body>
 <h1>hamashun.com</h1>
 ...省略...
 <address><a href="/about/hamashun">浜 俊太朗</a></address>
</body>

記事ごとの連絡先の例


<article>
 <h1>京都旅行における散歩について</h1>
 ...省略...
 <footer>
  <address><a href="http://example.com/taninaka">谷中 剛</a></address>
 </footer>
</article>
<article>
 <h1>スカイツリーの撮影に関する注意点</h1>
 ...省略...
 <footer>
  <address><a href="http://example.com/sobie">空塔 聳</a></address>
 </footer>
</article>

 address要素で示す連絡先は、あくまでも「そのarticle要素またはbody要素の連絡先」であり、連絡先なら何でもいいわけではありません。たとえば、次のような使い方は誤りです。

address要素の誤用例


<article>
 <h1>おいしいパン屋:パン・ド・ワッサン</h1>
 <p>クロワッサンがおいしいおすすめのパン屋です! 住所は以下です。</p>
 <address>住所:東京都世田谷区○○-○, 電話番号:XX-XXXX-XXXX</address>
</article>

 このソースコードの場合、address要素が示す連絡先は「おいしいパン屋:パン・ド・ワッサン」という記事を書いた人になるはずですが、実際にはパン屋の連絡先になってしまっています。

 単に住所などを表したい場合はp要素などを使用し、さらにセマンティクスを求める場合はマイクロフォーマットやマイクロデータを利用しましょう。

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く