『header要素』 / HTML5新要素一覧

header要素

ページや各セクションのヘッダーを表す場合に使用します。

header要素の特徴

header要素は、ページやセクションのヘッダーを表す場合に使用しますが、いくつかの特徴があります。

• header要素はページ内に複数使うことができます。
• header要素は見出し要素を含むことを想定していますが、無い場合でも間違えではありません。
• header要素はセクショニング・コンテンツではないため、アウトラインに現れることはありません。
• header要素内にheader要素、footer要素を使うことはできません。
• header要素は通常『ページ目次・サイトロゴ・検索フォーム』などを入れて使用します。

header要素のマークアップ方法

XHTML1.0やHTML4でのコーディングでは、ページのヘッダーを表す場合にdiv要素にid名を”header”と付けてコーディングしていた方(私もその一人です)も多いと思います。header要素を簡単に言ってしまえば、これに変わる要素として使用することができ、ヘッダーとしての意味をより強めることができます。

また、header要素の特徴の1つでセクションのヘッダーとしてページ内に複数使用することができます。例えば、下のブログページを考えてみます。

【header要素を複数使った例】

<header>
  <hgroup>
    <h1>HTML5でサイトをつくろう</h1>
    <h2>HTML5とCSS3の情報とサンプルをまとめました </h2>
  </hgroup>
  <nav>
    <ul>
      <li>HOME</li>
      <li><a href="#">SITEMAP</a></li>
    </ul>
  </nav>
</header>
<article>
  <header>
    <h1>『header要素』 / HTML5新要素一覧</h1>
    <p>Category : HTML5新要素一覧</p>
  </header>
  <section>
    <h2>header要素</h2>
    <p>セクションのヘッダーを表す場合に使用します。</p>
    ・
    ・
    ・
  </section>
</article>

少し長いソースになってしまいましたが、1～12行目に書かれているheader要素はページのヘッダーを表し、14～17行目のheader要素は記事のヘッダーを表しています。このように各セクションのヘッダーを表すためにheader要素を使うことができます。

header要素のアウトライン

header要素はセクショニング・コンテンツではないので、アウトラインには現れないという特徴があります。以前の記事『アウトライン』について / HTML5マークアップ時の基本で紹介しましたHTML 5 Outlinerを使い、実際に確認してみたいと思います。
尚、次の確認用ソースでは結果がわかり易いように、header要素に見出し要素を入れていません（※見出しが無くても間違いではありません。）。

【header要素のアウトラインを確認】

<header>
  <p>HTML5でサイトをつくろう</p>
  <p>HTML5とCSS3の情報とサンプルをまとめました</p>
</header>
<article>
  <h1>『header要素』 / HTML5新要素一覧</h1>
  <section>
    <h2>header要素</h2>
    <p>セクションのヘッダーを表す場合に使用します。</p>
    ・
    ・
    ・
  </section>
</article>

上記ソースコードのアウトライン結果

• 1. 『header要素』 / HTML5新要素一覧
• 1.1. header要素

アウトラインを確認したとことろ、ソースの1～4行目のheader要素内の内容は”Untitled Section”というテキストも表示されることなく上記の結果になりました。このことからheader要素がセクショニング・コンテンツでないことがしっかりと確認できました。

header要素の注意事項

最後にheader要素の中にheader要素とfooter要素を記述することはできないというルールを下記のソースで確認したいと思います。

【間違ったマークアップの例 】

<header>
  <h1>HTML5でサイトをつくろう</h1>  
  <header>
    <p>HTML5とCSS3の情報とサンプルをまとめました</p>
  </header>
</header>

【正しいマークアップの例 】

<header>
  <h1>HTML5でサイトをつくろう</h1>  
  <p>HTML5とCSS3の情報とサンプルをまとめました</p>
</header>

【間違ったマークアップの例 】のように、header要素の中にheader要素を使いマークアップすることはできません。【正しいマークアップの例 】で記述したようにヘッダー部分は1つのheader要素で囲うようにします。

参考サイト：

• header 要素　【HTML5.JP】

今回の記事で参考にした本

徹底解説HTML5マークアップガイドブック

HTML5の新要素や基本的なマークアップ方法について丁寧に解説が書かれています。
HTML5でサイトを構築する際やこのBlogの記事を書く時の参考にしています。他にもビジュアル系API編もcanvas要素の勉強用に持っています。

徹底解説HTML5マークアップガイドブック
最終草案対応版―全要素・全属性完全収録

「最終草案対応版―全要素・全属性完全収録」としてverが変わりました。すでに同じ本を持っている場合は追加で買わなくても大丈夫だとおもいましたがなにがなくなって追加されたか興味がありましたので両方買って見ました。

ブログを作成する際に参考にした本はこちらにまとめてあります。