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

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

セクショニング・コンテンツの要素
要素名 意味・役割
<section> 章・節・項などの一般的なセクションを表す要素
<article> 内容が完結している独立したセクションを表す要素
<aside> メインコンテンツに含まれない補足的なセクションを表す要素
<nav> 主要なナビゲーションのセクションを表す要素

section要素 HTML5で追加

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

カテゴリ
コンテンツ・モデル
フロー・コンテンツ

サンプル

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

RERUN

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

article要素 HTML5で追加

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

カテゴリ
コンテンツ・モデル
フロー・コンテンツ

サンプル

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>
ブラウザでの表示例

RERUN

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

aside要素 HTML5で追加

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

カテゴリ
コンテンツ・モデル
フロー・コンテンツ

サンプル

aside要素の例
<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>
ブラウザでの表示例

RERUN

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

nav要素 HTML5で追加

<navナビ>要素は、主要なナビゲーションを表す要素です。 具体的にはサイトの全ページに一貫して表示されるグローバルナビゲーションなどに利用します。 この <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>

※. <a>要素のhref属性には、リンク先のファイルを作成していないため、ダミーとして "#" を指定しています。

ブラウザでの表示例

RERUN

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

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

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

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

※. <a>要素のhref属性には、リンク先のファイルを作成していないため、ダミーとして "#" を指定しています。

  1. 上書き保存し、ブラウザで確認 (特に見た目に変化はありません。)
ブラウザでの表示例

RERUN

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

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

上記で作成したindex.htmlのアウトライン
  1. 伝説のWEBクリエーター日記
    1. メインメニュー
    2. 伝説のWEBクリエーター日記とは
    3. 新着の日記
      1. 「【練習問題2】ムカミのお願い」をクリアした。
      2. 「label要素」を習得した。
    4. 近況

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

アウトラインのルール

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

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

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

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

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

練習問題

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

    • 文字列「メインメニュー」 〜 文字列「お問い合わせ」
    • 文字列「Dummyのこだわり」 〜 文字列「社員の給料を徹底的にコストカットします。」
    • 文字列「スピード」 〜 文字列「残業や休日出勤を惜しみません。」
    • 文字列「クオリティ」 〜 文字列「社員に一切の妥協を許しません。」
    • 文字列「プライス」 〜 文字列「社員の給料を徹底的にコストカットします。」
    • 文字列「Dummyブログ」 〜 文字列「「ホームページを作れるようになりたい」と言い出しました。…もっと読む」
    • 文字列「私の息子が当社ホームページの「お問い合わせフォーム」を作成しました。」 〜 文字列「当社ホームページに「お問い合わせフォーム」を作ってくれました。…もっと読む」
    • 文字列「私の息子がホームページの勉強を始めました。」 〜 文字列「ホームページを作れるようになりたい」と言い出しました。…もっと読む」
    • 文字列「関連リンク」 〜 文字列「Cafe Dummy」
ブラウザでの完成例

RERUN

解答例