章・節・項などのセクションを表す要素

HTML5よりも前のHTMLやXHTMLでは、見出しを表す<h1>要素 〜 <h6>要素を使って話題の階層を推測し判断していましたが、HTML5からは、そのような章・節・項などのセクションを明示的に表す要素が追加されました。なお、これらの要素はセクショニング・コンテンツというカテゴリに分類されます。

section要素 HTML5で追加

<section（セクション）>要素は、章・節・項などの一般的なセクションを表す要素です。 基本的な話題の階層は、この <section>要素を使います。

カテゴリ

• フロー・コンテンツ
• セクショニング・コンテンツ
• パルパブル・コンテンツ

コンテンツ・モデル

フロー・コンテンツ

サンプル

<section>
  <h2>第１章 -ボブのお父さんの会社-</h2>
  <p>ボブは、お父さんに「会社のホームページを更新してくれ」と頼まれた。</p>
  <section>
    <h3>依頼</h3>
    <p>僕はボブに、「お父さんの会社のホームページの更新を手伝ってくれ」とお願いされた。</p>
  </section>
  <section>
    <h3>葛藤</h3>
    <p>僕はボブの依頼を断ろうと考えた。なぜなら、ボブやボブのお父さんの期待に応えれる自信がなかったからだ・・・。</p>
  </section>
</section>

<section>要素はこのように、各セクションごとにマークアップします。そして、<section>要素の最初の見出しがそのセクションの見出しとなります。本の目次のように階層構造を意識しましょう。

article要素 HTML5で追加

<article（アーティクル）>要素は、ブログやニュース記事などの独立したセクションを表す要素です。 具体的には、 <article>要素でマークアップした部分だけを抜き取っても、その部分が独立したコンテンツとして成り立つ必要があります。 <section>要素との使い分けが難しいですが、そのセクションが独立できるコンテンツであれば<article>要素、そうでなければ<section>要素でマークアップしましょう。

カテゴリ

• フロー・コンテンツ
• セクショニング・コンテンツ
• パルパブル・コンテンツ

コンテンツ・モデル

フロー・コンテンツ

サンプル

<article>
  <h1>とんでもないホームページを発見！ネットのモラルを見直そう</h1>
  <p>
    先日ネットサーフィンをしていたら、とんでもないホームページを発見してしまいました。<br> 今日はその事について書きたいと思います。
  </p>
  <section>
    <h2>問題のホームページ</h2>
    <p><img src="images/mituketa-homepage.png" alt="問題のホームページには「僕の仲間の連絡先」と題して、息子の個人情報が掲載されている。"><br>（個人情報の部分はモザイク処理してます）</p>
    <p>これが問題のホームページです。なんと、私の息子の個人情報が堂々と掲載されているではありませんか。<br> しかも、このホームページを運営しているのは息子の友人とのこと。</p>
  </section>
  <section>
    <h2>今後の対応</h2>
    <p>とりあえず息子の友だちには、息子の個人情報を削除してもらいます。<br> この友達は伝説のWEBクリエーターを目指してるんですって。</p>
  </section>
  <section>
    <h2>コメント</h2>
    <article>
      <h3>吾輩は猫である さんからのコメント</h3>
      <p>お母さん！他の友だちの個人情報もモザイクしてあげてw</p>
    </article>
    <article>
      <h3>アイドル大好き さんからのコメント</h3>
      <p>伝説のWEBクリエーターにモラルは必要ないのか・・・乙</p>
    </article>
  </section>
</article>

上記は、ブログ記事を<article>要素でマークアップした例です。 <article>要素はこのように、ブログやニュースの記事のように独立したコンテンツのセクションに利用します。また、上記の例のようにブログ記事に対するコメントなどにも利用します。 はじめのうちは、 <section>要素との使い分けが難しいですが、今は難しく考えずブログ記事や、そのコメント、ニュース記事などのセクションには、<article>要素を使うと覚えましょう。

aside要素 HTML5で追加

<aside（アサイド）>要素は、メインコンテンツからは切り離すことが可能な補足的なセクションを表す要素です。 具体的には、 補足情報や余談、広告やサイドバーの補足コンテンツなどに利用します。なお、<article>要素内などのメインコンテンツ内で使う場合は、そのメインコンテンツに関連した補足コンテンツに利用します。

カテゴリ

• フロー・コンテンツ
• セクショニング・コンテンツ
• パルパブル・コンテンツ

コンテンツ・モデル

フロー・コンテンツ

サンプル

<h1>メアリーブログ</h1>
<article>
  <h2>お友達がオープンするカフェのホームページを作ることになりました！</h2>
  <p>今度、私の友達がカフェをオープンします。そしてそのカフェの<strong>ホームページを私が作ることになりました。</strong>イェ-イ！</p>
  <aside>
    <h3>Cafe Dummy</h3>
    <p>私の友達がオープンするおしゃれなカフェ。12月にオープン予定。</p>
  </aside>
</article>

<aside>
  <h2>スポンサー</h2>
  <p>
    <a href="#"><img src="images/logo-dummy.png" width="240" height="80" alt="架空の株式会社ダミー"></a>
  </p>
</aside>

<aside>要素は上記の例のように補足コンテンツのセクションに利用します。 <article>要素などのメインコンテンツ内に使う場合は、そのメインコンテンツと関連した情報でなくてはなりません。従って、上記の例にある「スポンサー」という広告のコンテンツは、「メアリーブログ」に対してのスポンサーになるので、<article>要素内には配置しません。

nav要素 HTML5で追加

<nav（ナビ）>要素は、主要なナビゲーションを表す要素です。 具体的にはサイトの全ページに一貫して表示されるグローバルナビゲーションなどに利用します。 この <nav>要素はページ内でひとつしか使ってはいけないということはありませんが、全てのリンクのリストに使うわけでもありません。あくまで主要なナビゲーションをマークアップします。

カテゴリ

• フロー・コンテンツ
• セクショニング・コンテンツ
• パルパブル・コンテンツ

コンテンツ・モデル

フロー・コンテンツ

サンプル

<nav>
  <h2>メインメニュー</h2>
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">企業情報</a></li>
    <li><a href="#">製品情報</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

<nav>要素は上記の例のような主要なナビゲーションに利用します。 よく上記のようなグローバルナビゲーション （サイトの全ページに一貫して表示されている主要なナビゲーション）が、サイトのヘッダー （上部）と、サイトのフッター（下部）にも配置されているWEBサイトを見かけます。そのような場合は、サイトのヘッダー側のグローバルナビゲーションのみを<<nav>要素でマークアップしましょう。

セクショニング・コンテンツの要素を使ってみよう

それでは、セクショニング・コンテンツの要素を使ってみましょう。

1. 「Chapter19」フォルダ内の「index.html」をテキストエディタで開く
2. 下記を参考に、<section>要素、<aricle>要素、<aside>要素、<nav>要素をマークアップ

<h1>伝説のWEBクリエーター日記</h1>
<nav>
  <h2>メインメニュー</h2>
  <ul>
    <li><a href="#">すべての日記</a></li>
    <li><a href="#">僕の仲間</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>
<section>
  <h2>伝説のWEBクリエーター日記とは</h2>
  <p>この日記は、僕が伝説のWEBクリエーターになるための冒険を記した冒険の書だ。</p>
</section>
<section>
  <h2>新着の日記</h2>
  <article>
    <h3>「【練習問題2】ムカミのお願い」をクリアした。</h3>
    <p>先日習得したフォーム関連の要素などを使って、ムカミからお願いされた「お問い合わせフォーム」を作成した。...<a href="#">もっと見る</a></p>
  </article>
  <article>
    <h3>「label要素」を習得した。</h3>
    <p>フォームのコントロール部品とそのラベルを関連付ける為の要素であるlabel要素を習得した。...<a href="#">もっと見る</a></p>
  </article>
</section>
<aside>
  <h2>近況</h2>
  <p>HTMLを<em>必死で</em>勉強中！</p>
</aside>

3. 上書き保存し、ブラウザで確認 （特に見た目に変化はありません。）

アウトラインを意識しよう

HTML5では、セクションの階層構造を意識することが重要になります。 この階層構造のことを アウトラインと言い、セクショニング・コンテンツの各要素や、 ヘディング・コンテンツの<h1> 〜 <h6> 要素を使うごとに生成されます。例えば、上記で作成した「index.html」のアウトラインは以下のようになります。

このように、セクションの見出しがアウトラインとなります。従って、本の目次を作るように、このアウトラインを意識したマークアップが必要となります。

アウトラインのルール

アウトラインは、以下のルールで生成されます。

セクショニング・コンテンツの要素がない場合

従来のように、セクショニング・コンテンツの要素を使わない場合は、見出しの要素が現れた時にセクションが始まります。ただし、見出し要素の階層（見出し要素の数字）によって、新たなセクションとして始めるか、サブセクションとして始めるかが異なります、 具体的には、見出し要素の階層が、前の見出し要素と同じ階層か、それより上の階層であれば（数字が小さければ）現在のセクションを終了し、新たなセクションとしてをセクションを始めます。反対に、見出し要素の階層が、前の見出しより下の階層であれば（数字が大きければ）、現在のセクションのサブセクションとして、セクションを始めます。従って、作りたいアウトラインに合わせて適切に<h1> 〜 <h6>要素を使う必要があります。

セクショニング・コンテンツの要素がある場合

セクショニング・コンテンツの要素がある場合、セクショニング・コンテンツの要素が現れた時に、現在のセクションのサブセクションが始まります。なお、そのセクションの先頭にある見出しが、そのセクションの見出しとなります。 従って、セクショニング・コンテンツの要素を適切に使用していれば、見出しの階層（見出し要素の数字）に関係なくアウトラインを生成出来ます。ただし、セクションの範囲はセクショニング・コンテンツの要素で明示的に示し、その階層に合わせた見出しの要素を使うことが推奨されています。

練習問題

「Chapter19」 -> 「quest」フォルダ内の「index.html」を開いて下記の問題を解いてみましょう。なお、解けた問題は問題文の横のチェックボックスをオンにしましょう。