CodeZine(コードジン)

特集ページ一覧

HTML4から変化したHTML5のマークアップ
ここが違う!サンプルで見るHTML5(2)

第2回 文書構造とセマンティクス

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2010/12/02 14:00

目次

ヘッダーとフッター

 HTML5には、セクションを表す要素の他にも、文書の構造を表す要素がいくつか追加されました。ここで紹介する新要素は、header要素、footer要素、hgroup要素です。

 header要素とfooter要素は、名前の通り、ヘッダーフッターを表します。しかし、ページのヘッダーやフッターだけでなく、ブログエントリーなどarticle要素で表されたコンテンツのヘッダーやフッターにも使えます。

 hgroup要素は、見出しと副題をグループ化します。hgroup要素には、見出し要素(h1~h6要素)しか入れることはできません。見出しレベルが最も高い要素が見出しとなり、それ以外は副題という位置づけになります。

ヘッダーとフッターの利用例

 では、ブログエントリーを想定したページをご覧頂きましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サイト名</title>
</head>
<body>

<!-- ページ・ヘッダー -->
<header>
  <hgroup>
    <h1>サイト名</h1>
    <h2>サブタイトル</h2>
  </hgroup>
  <p>サイトの説明</p>
  <nav>
    <h2>サイト・ナビゲーション</h2>
    <ul>
      <li><a href="/">トップ</a></li>
      <li><a href="/about/">運営者情報</a></li>
      <li><a href="/contact/">お問い合わせ</a></li>
    </ul>
  </nav>
</header>
<!-- メイン・コンテンツ -->
<article>
  <header>
    <hgroup>
      <h2>ブログ・エントリーのタイトル</h2>
      <h3>ブログ・エントリーのサブタイトル</h3>
    </hgroup>
  </header>
  <section>
    <h3>見出し1</h3>
    <p>本文</p>
  </section>
  <section>
    <h3>見出し2</h3>
    <p>本文</p>
  </section>
</article>
<!-- サイトバー -->
<aside>
  <h2>広告</h2>
  <div>...</div>
</aside>
<!-- ページ・フッター -->
<footer>
  <p><small>Copyright &#169; 2010 Example.JP All Rights Reserved.</small></p>
</footer>

</body>
</html>

 HTML4では、ヘッダー、フッター、見出しのグルーピングには、div要素を使わざるを得ませんでした。しかし、HTML5では、専用の要素を用意することで、HTMLの文書構造をはっきりと表すことができるようになったのです。

header要素、footer要素、hgroup要素のアウトラインへの影響

 header要素、footer要素、hgroup要素はセクションを表すわけではありません。先ほどのHTMLがどのようなアウトラインを形成するのかを、HTML5 Outlinerを使って調べてみましょう。

HTML5 Outlinerの検証結果
HTML5 Outlinerの検証結果

 ご覧の通り、header要素、footer要素、hgroup要素は文書構造を表す要素であるものの、アウトラインに全く影響を与えません。また、hgroup要素に入れられた見出しにも注目してください。

hgroup要素のマークアップ
<hgroup>
  <h2>ブログ・エントリーのタイトル</h2>
  <h3>ブログ・エントリーのサブタイトル</h3>
</hgroup>

 hgroup要素には、h2要素とh3要素がマークアップされています。しかし、アウトラインには、h2要素で表された見出ししか現れません。h3要素で表された見出しは、あくまでも副題という位置づけで解釈されていることが分かります。

 今回は、HTML5の文書構造を表す新要素の意味や使い方について解説しました。HTML5では、ウェブページの文書構造を機械的に把握しやすくなったのです。これにより、例えば、検索エンジンのロボットや、スクリーン・リーダーといったソフトウェアからも、適切にウェブページのコンテンツの構造を理解できるようになります。次回は、HTML4でも使われてきたものの、HTML5で再定義された要素や属性について解説します。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:ここが違う!サンプルで見るHTML5

著者プロフィール

  • 羽田野 太巳(ハタノ フトミ)

    有限会社futomi 代表取締役 1971年岐阜県生まれ。 ホスティングサーバー(共用サーバー)でも利用できるウェブ・アプリケーションの独自開発・販売を手がける。主にPerlによるCGI制作が中心。 オーダーメードのウェブ・アプリケーション制作/ウェブ・サーバー管理業務も手がける。 20...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5