（文書構造編：前編）HTML5のセクションで“文書構造”を理解する：HTML5“とか”アプリ開発入門（4）（2/2 ページ）

文書の論理構造を表すための新たな要素「セクション」。マークアップの量は増えるが、文書のツリー構造がずっと把握しやすくなる

[白石俊平，株式会社オープンウェブ・テクノロジー] PC用表示関連情報

LINE

Hatena

前のページへ | 　　　　　　

セクション関連で基本となる4つの要素

　文書のセクションを表すための「セクション要素」には、以下のようなものがあります。

section
最も基本的なセクション要素
article
文書の「本文」部分を表すセクション要素
nav
サイトのナビゲーションメニュー部分を表すセクション要素
aside
ページの主な内容とはあまり関連のない部分を表すセクション要素

　以降、1つ1つ解説します。

文書の論理構造を表すための最も基本的な＜section＞要素

　「セクション関連要素とその背景」のところでも取り上げたように、文書の論理構造を表すための最も基本的なセクション要素です。実際のマークアップでも、最も多用されるでしょう。

文書の「本文」部分を表す＜article＞要素

　Webページ内の「本文部分」を表すために用いられる要素です。ブログや一般的なWebメディアなどで分かるように、Webページには「本文」といえる部分以外にもたくさんの構成要素があります（ナビゲーションメニュー、サイドバー、広告など）。そのため、＜article＞要素を用いて本文部分を明確にすることが必要になるというわけです。

　そうしておけば、例えば検索エンジンやリスティング広告などにとっても、ページの主要コンテンツがどこか、を判断しやすくなるでしょう。

　ページ内のある部分を、＜article＞要素で囲むのが適切かどうかを判断するには、「その部分だけで内容が完結しているか」が1つの基準です。もっと具体的にいうと、「要素で囲まれた部分だけを、RSSで配信しても意味が通るかどうか」を判断基準にするといいでしょう。

　また、＜article＞要素は入れ子で使用することもできます。入れ子にされた＜article＞要素は、外側の＜article＞要素と深く関連しているものと見なされます。例えば、「ブログ本文に対するコメントの1件1件を、独立した入れ子の＜article＞要素で表現する」といったマークアップ方法が考えられます。以下の例を見てください。

<html>
  <body>
    <article>
      <h1>本文タイトル</h1>
      本文本文
      <section>
        <h1>コメント欄</h1>
        <article>
          <h1>コメント1タイトル</h1>
    	  コメントコメント
        </article>
        <article>
          <h1>コメント2タイトル</h1>
    	  コメントコメント
        </article>
      </section>
    </article>
  </body>
</html>

ナビゲーションメニューを表す＜nav＞要素

　Webサイトのナビゲーションメニューを表す要素です。この要素内には、他のページや文書中の他の個所にジャンプするためのナビゲーションリンクを複数配置します。

　ただし、グループ化されたリンクがすべて＜nav＞要素に適しているわけではありません。＜nav＞要素は、あくまで他のリンク要素とナビゲーションメニューを区別するためのものです。そのため、サイトの主要なナビゲーションを提供するリンクグループのみが、＜nav＞要素に適しているといえます。

　例えば、ページのフッタに「利用規約」「運営企業」へのリンクが配置されていることはよくありますが、それらは＜nav＞要素で囲むのには適していません。

　以下に＜nav＞要素の使用法についての例を示します。＜nav＞要素の内部には、＜ul＞要素を用いてリンクを配置するのが一般的です。

<body>
  <!-- header要素は、セクションのヘッダを表す（解説は解説） -->
  <header>
    <h1>サイトタイトル</h1>
    <!-- ナビゲーションメニュー -->
    <nav>
      <h1>サイトナビゲーション</h1>
      <ul>
        <li><a href="top.html">トップ</a></li>
        <li><a href="top.html">設定</a></li>
        <li><a href="top.html">ヘルプ</a></li>
        <li><a href="top.html">ログアウト</a></li>
      </ul>
    </nav>
  </header>
  <article>
    <h1>本文タイトル</h1>
    ……
  </article>
</body>

Webページの主要な内容とは関連が薄い＜aside＞要素

　＜aside＞要素は、Webページの主要な内容とは関連が薄い、もしくは切り離して取り扱うことが可能なセクションを表します。例えば、ブログにおけるサイドバーや広告エリア、本文から抜粋されたリード文などを表すのに最適です。

　以下に、ブログページのサイドバーを、＜aside＞要素を使用して表した例を示します。

<body>
  <h1>ブログタイトル</h1>
  <article>
    ……
  </article>
  <aside class="sidebar">
    <h1>サイドバー</h1>
    <section class="ads">
      広告
    </section>
    <nav class="archives">
      過去記事アーカイブ
    </nav>
  </aside>
</body>

セクションで見出し要素を使う際の注意点

　先に述べたように、各セクションには＜h1＞〜＜h6＞の見出し要素を含めるのが普通です。そこで、セクションの見出しに関して知っておくべきことを以下に示します。

セクションが異なれば、同じレベルの見出しを使用してもいい

　セクション要素を用いて、明示的に文書のツリー構造を表す場合には、異なるセクションで同じレベルの見出しを用いても構いません。例えば、「すべてのセクションで＜h1＞要素しか用いない」ということも可能です。

　以下の例は、この記事の前半で紹介した＜section＞要素の使用例を書き直したものです。以前の例では、セクションのツリー構造（アウトライン）に対応して、見出しも＜h1＞＜h2＞＜h3＞を使い分けていましたが、今回はすべての見出しを＜h1＞要素でマークアップしています。

<section>
  <h1>1 HTML5の基礎知識</h1>
  <section>
    <h1>1.1 HTML5の概要</h1>
    本文本文
    <section>
      <h1>1.1.1 HTML5とは</h1>
      本文本文
    </section>
    <section>
      <h1>1.1.2 HTML5と関連API</h1>
      本文本文
    </section>
  </section>
  <section>
    <h1>1.2 HTML5クイックスタート</h1>
    本文本文
    <section>
      <h1>1.2.1 HTMLとXHTML</h1>
      本文本文
    </section>
  </section>
    ……
</section>

　見て分かるとおり、＜section＞要素の入れ子関係により文書の論理構造が表せているので、見出しのランクを使い分ける必要がありません。そして、この「明示的なセクション指定を行い、常に＜h1＞で見出しを表す」というマークアップは、HTML5仕様においても強く推奨されている方法です。

　では、＜h2＞以降の見出し要素は必要なくなるのかというと、そういうわけではありません。次に示すように、1つのセクション内で複数レベルの見出しを使用する場合に用いられます。

各セクションに、見出しは1つだけ

　見出し要素に関するもう1つの注意事項は、「1つのセクションには見出し要素を1つしか含めることができない」ということです。例えば、タイトルとサブタイトルを持つ文章を以下のようにマークアップすると、意図しない結果を引き起こします。

<article>
  <h1>タイトル</h1>
  <!-- 暗黙的なセクションが作成されてしまい、意図したアウトラインと異なる -->
  <h2>サブタイトル</h2>
  本文本文
</article>

　詳しくは次回の記事で解説しますが、上の例では＜h2＞要素が暗黙的なセクションを自動的に作成するので、意図したアウトラインと異なるものになります。つまり、「1セクション当たり1見出し要素」という原則を破っているため、意図しない結果を引き起こしているということです。

見出しをまとめる＜hgroup＞要素

　この例を、「2つのレベルの見出し（タイトルとサブタイトル）を同時に持つ、1つのセクション」という意図どおりにマークアップするには、「見出しをまとめる」効果を持つ＜hgroup＞要素を使用します。

<article>
  <!-- 2つの見出し要素が、hgroupによって1つにまとめられる -->
  <hgroup>
    <h1>タイトル</h1>
    <h2>サブタイトル</h2>
  </hgroup>
  本文本文
</article>

　＜hgroup＞要素は、それ自体が1つの見出し要素と見なされます。hgroup自体を見出しとして取り扱う場合は、＜hgroup＞要素内の最も高いランクの見出し要素のランク、テキスト内容が使用されます。

次回は、さらなるセクション関連要素と「アウトライン」

　今回は、セクション要素と見出し要素の基本的な使用法について説明しました。次回は、セクションのヘッダやフッタを作成する方法など、セクションに関連したさまざまな要素について解説します。

　最後に、今回登場した要素の使い方をまとめたサンプル「HTML5のセクション要素利用例」を用意しました。「ページのソースを表示」するなどして、HTML5マークアップの参考にしてください。

＠IT関連記事

デザイナは要注目！明日から語れるHTML5＆CSS3
一撃デザインの種明かし（13）　Webデザイナのみならずプログラマも必修となるHTML5＆CSS3について、具体的な表現の例や、タグ、今後の予想、ツールなどを紹介します
デザインハック＜リッチクライアント 2010/9/27

標準化と実装が進む次世代Web規格「HTML5」とは？
用語解説（12）　ChromeやOperaなどのWebブラウザへの実装が始まっているHTML5。何が新しくなるのか？ HTMLの歴史を振り返りながら、その目的や特徴を解説する
「Windows Server Insider」フォーラム 2010/8/19

HTML5が拓く新しいWeb
新たなアプリのプラットフォームとなるHTML5に対してWebブラウザベンダの取り組みを聞くインタビュー
「デザインハック」コーナー

HTML5で何が変わる？ InfoTalk#17 フォトレポート
Development Photography（6）　HTML5で、アプリとWebの関係は、JavaScriptはどう変わる？コネクティ若狭氏＆サイボウズ・ラボ竹迫氏が登壇した勉強会をレポート
自分戦略研究所 > 自分戦略研究室 2010/4/19