Tbpgr Blog

Employee Experience Engineer tbpgr(てぃーびー) のブログ

HTML5新要素 header,footerタグ

概要

header,footerタグについて説明します。

内容

headerはイントロダクションやナビゲーションの支援となるグループを表します。
footerはセクショニングコンテンツのフッターを表します。
よくある例としては、サイトのタイトルとナビゲーションが画面上部にあり
コンテンツが画面中央にあり、コピーライトなどを表示するフッターが画面下部にあるような場合です。

この場合HTML5ではコンテナとなるdivタグのidでheader,contents,footerなどで分類する場合が
多かったかと思いますが、html5はタグ自体でその文書構造を表すことが出来ます。

サンプル

<!DOCTYPE HTML>
<html lang="ja-JP">
  <head>
    <meta charset="UTF-8" />
    <script type="text/javascript"></script>
    <title>HTML5ページ構成サンプル</title>
    <style type="text/css">
    h1,h2 {
      border-style:solid;
      border-width:1px;
      background-color:yellow;
    }
    
    h1 {
      font-size:16px;
    }

    h2 {
      font-size:14px;
      margin-left:20px;
    }
    
    p {
      font-size:12px;
      border-style:solid;
      border-width:1px;
      background-color:gray;
      margin-left:30px;
    }
    
    article {
      border-style:solid;
      border-width:1px;
      border-color:green;
      padding:5px;
    }
    
    section {
      border-style:solid;
      border-width:1px;
      border-color:red;
      padding:5px;
    }
    
    aside {
      border-style:solid;
      border-width:1px;
      border-color:blue;
      padding:5px;
      margin:5px;
    }
    
    header {
      border-style:solid;
      border-width:1px;
      border-color:yellow;
      padding:5px;
      margin:5px;
    }
    
    footer {
      border-style:solid;
      border-width:1px;
      border-color:purple;
      padding:5px;
      margin:5px;
    }
    </style>
  </head>
  <body>
    <header>
      <hgroup>
        <h1>HTML5ページ構成サンプル</h1>
        <h2>概要</h2>
        <p>HTML5のページ構成サンプルをご紹介します</p>
      </hgroup>
    </header>
    <article>
      <hgroup>
        <h1>headerタグについて</h1>
        <h2>headerタグの文法</h2>
        <section>headerタグの文法は・・・・</section>
        <h2>headerタグのサンプル</h2>
        <section>headerタグのサンプルは・・・・</section>
      </hgroup>
    </article>
    <article>
      <hgroup>
        <h1>footerタグについて</h1>
        <h2>footerタグの文法</h2>
        <section>footerタグの文法は・・・・</section>
        <h2>footerタグのサンプル</h2>
        <section>footerタグのサンプルは・・・・</section>
      </hgroup>
    </article>
    <footer>Copyright (C) 2012 tbpg All Rights Reserved.</footer>
  </body>
</html>

完成画面のキャプチャ

黄色枠がheader、紫枠がfooter
青枠がaside、緑枠がarticle、赤枠がsectionです。