デザインとグラフィックの総合情報サイト
[エムディエヌ・デザイン・インタラクティブ]

第4回 HTML5で新しく定義された新要素「section要素」の使い方の基本をまとめよう

特集記事

第4回 HTML5で新しく定義された新要素「section要素」の使い方の基本をまとめよう

前回はHTML5から追加された追加要素の中から見出しをグループ化する「hgroup要素」、ヘッダに該当する「header要素」、フッタに該当する「footer要素」、主要ナビゲーションに該当する「nav要素」、補足情報に該当する「aside要素」、イメージや図画などに使用する「figure要素」を紹介しました。

今回はセクショニング・コンテンツの要素の中で定義が漠然としていて使い方がわかりにくいとよく言われている「section要素」と「article要素」の要素のうち、まずは「section要素」からまとめたいと思います。前回取り上げた各要素は使い方のイメージがつきやすくわかりやすかったですが、この2つはページの構成や原稿内容によって使い方に迷ってしまう場合があります。「section要素」と「article要素」2つの使い分けはどうなのだろうか? と思う人も多いと思います。まずは簡単なルールを覚えて使っていくのがいいでしょう。実制作では判断に困る場合は無理に使わなくてもマークアップすることは可能ですので、まずは基本の概念を理解していきましょう。

解説:(有)ムーニーワークス 林 豊/田崎一成



セクションについて

この2つの要素を理解する前に「セクション」の意味を理解する必要があります。セクションとは章や節や項のように、見出しとそれに関する内容というように階層構造(※アウトライン)になる範囲を定義する領域になります。通常は最初に見出しがあり、その後にそれに関する文章などが続きます。本来ドキュメントというのは、セクションの塊でWebサイトやブログや書籍などもそうです。
※HTML5アウトラインについての考え方は要素の説明が終わりコンテンツを作成する際に詳しくまとめる予定です
本連載を例にすると「MdN Design Interactive」というサイトの連載のひとつとして「ゼロからはじめるHTML5でのサイト制作」というコーナーを持ち、2週間に一度記事が追加される形で連載を行っております。

サイトには他の連載も同様にあり各ページが作られていきます。これをセクションわけしてみると下記の図のようになります。


【セクションについて】
セクション分けをしてみる

セクション分けをしてみる

サイト名である「MdN Design Interactive」という大見出しがあり、内容としてサイトの説明や各カテゴリ群があります。連載タイトルでは「ゼロからはじめるHTML5でのサイト制作」という中見出しがあり、内容として各回の記事ブロック群があります。そして、各回の記事のタイトル「第1回目 HTML5でサイトをつくろう!xhtmlからHTML5へ」が小見出しがあり、内容として各回の内容があります。

【セクションに分けた原稿をいままで通りにマークアップ】

<h1>MdN Design Interactive</h1>

<p>Webデザインとグラフィックの総合情報サイト。プロのWebデザイナーやグラフィックデザイナーはもちろん、プロを目指す方のための情報を毎日更新</p>

<h2>ゼロからはじめるHTML5でのサイト制作</h2>
<p>本連載は、HTML5をはじめてやってみようという人に、HTML5のマークアップの基本から新要素の使い方、スマートフォンサイト作成などサンプルを作りながら学んでいきます。</p>

<h3>第1回 HTML5でサイトをつくろう!xhtmlからHTML5へ</h3>
<p>最近話題になっているHTML5ですが、どこからやっていけばいいのか? 書籍やWEBサイトを見ると派手なことができそうだけど難しいのではないか? そう思っている人も多いと思います</p>

<h3>第2回 HTML5で使い方が変更されたタグをまとめよう</h3>
<p>HTML5でサイトが作られる機会が少しづつ増え、HTML5の新しいタグを覚えようというブログや書籍はよく見ますが、今までxhtml1.0で使われていたタグの中にも使い方の変更になったタグがいくつかあります。</p>

<h3>第3回 HTML5で新しく定義された新要素をまとめよう</h3>
<p>HTML5になって新しく定義された新要素(タグ)が多くあります。今回は前回の使い方が変更になった要素の続きとして、新しく定義された新要素の中から新しくなったタグをまとめていきます。</p>

<h2>他の連載記事</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>

<h3>第1回目 連載記事タイトル</h3>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

<h3>第2回目 連載記事タイトル</h3>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

見出し要素を使用してマークアップする

このマークアップはWebサイトを作成したことがある人には馴染みのあるものだと思います。サイト名に当たる部分を<h1>タグとして、各連載のタイトルにあたる部分を<h2>タグにして、各連載記事タイトルを<h3>を使用してマークアップします。しかし、このままではどこまでが1つのセクションで構成しているのかを明示的に示すことができません。

この段階でも実際には、階層を持ったドキュメントになるのですが、マークアップ上は同じ階層に位置しています。h1要素やh2要素などの見出しレベルによって、暗黙に階層化されていることを示しています。これは制作をしている人にとっては自然に階層構造のイメージは出来ていると思います。

今まではここからCSSでレイアウトする際に、<div>タグを追加してそれぞれの内容がわかるようにid属性やclass属性を追加していました。このようにすることでCSSでレイアウトする際に各要素をわかりやすいようにマークアップし、先にあげたセクション分けした図に近い形をイメージを持ちながら制作していました。
【divタグを使用しCSSレイアウトさせる際のマークアップ】

<h1>MdN Design Interactive</h1>

<p>Webデザインとグラフィックの総合情報サイト。プロのWebデザイナーやグラフィックデザイナーはもちろん、プロを目指す方のための情報を毎日更新</p>

<div class="section">
<h2>ゼロからはじめるHTML5でのサイト制作</h2>
<p>本連載は、HTML5をはじめてやってみようという人に、HTML5のマークアップの基本から新要素の使い方、スマートフォンサイト作成などサンプルを作りながら学んでいきます。</p>

<div class="post">
<h3>第1回 HTML5でサイトをつくろう!xhtmlからHTML5へ</h3>
<p>最近話題になっているHTML5ですが、どこからやっていけばいいのか? 書籍やWEBサイトを見ると派手なことができそうだけど難しいのではないか? そう思っている人も多いと思います</p>
</div>

<div class="post">
<h3>第2回 HTML5で使い方が変更されたタグをまとめよう</h3>
<p>HTML5でサイトが作られる機会が少しづつ増え、HTML5の新しいタグを覚えようというブログや書籍はよく見ますが、今までxhtml1.0で使われていたタグの中にも使い方の変更になったタグがいくつかあります。</p>
</div>
      ・
      ・
</div>

<div class="section">
<h2>他の連載記事</h2>
<div class="post">
<h3>第1回目 連載記事タイトル</h3>
<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
     ・
     ・
</div>

id属性やclass属性を追加して各要素をCSSでレイアウトする際に使用

ここまでは皆さんもいつもやっていることだと思いますが、HTML5からセクションを明示的に囲むための要素として「section要素」と「article要素」がその役割を担います。これらの要素を使えば明示的に階層を示すことができます。



section要素

section要素は文章の論理構造を表すための最も基本となる要素。つまり一般的なセクションを表します。この要素はセクショニング・コンテンツに属する要素です。

セクションは必ず、章や節といった単位で使わなければなりません。また章や節を表すのでこの要素の中にはh1~h6要素を使って見出しをいれます。もし

タグを使うか迷った場合はその部分に見出しを付けることができるかどうかということを考えてみるのもよいかもしれません。

また間違いやすいですがsection要素はdiv要素の代わりではないので、いままでdiv要素で書いていた部分をすべてsection要素に置き換えればよいということではありませんので注意してください。

なお、section要素はセクショニング・コンテンツに属しますが、それ以外にも主要ナビゲーションならnav要素、補足記事やサイドバーの補足内容であればaside要素、独立したコンテンツであればarticle要素などと必ずしもsection要素を使う訳ではなく、マークアップ時には該当セクションに応じて適したセクショニング・コンテンツの要素を使用することにも注意しなければいけません。

section要素の主な特徴しては、

●章や節といった単位で扱うので、セクション内容を表すh1~h6の見出しが必ず必要になる
●コンテナ要素ではないので、レイアウト目的に使用することはできない。スタイリングに都合の良い要素が必要になった場合はdiv要素が推奨されている

があげられます。

section要素の中には見出し要素が必要

1つ目の特徴としてsection要素は章や節といった単位で扱うので、セクション内容を表す見出し要素が必ず必要になります。

 【section要素:間違ったマークアップの例】

<h1>MdN Design Interactive</h1>

<p>Webデザインとグラフィックの総合情報サイト・・・</p>

<section> ← こちらのsectionに見出しがありません

 <p>HTML5でサイトをつくろう!</p>

 <p>ゼロからはじめるHTML5でのサイト制作の連載が・・・</p>

 <section> ← こちらのsectionに見出しがありません

  <p>第1回 HTML5でサイトをつくろう!・・・<br />

  <span>最近話題になっているHTML5ですが、・・・</span></p>

 </section>

 <section> ← こちらのsectionに見出しがありません

  <p>第2回 HTML5で使い方が変更されたタグをまとめよう<br />

  <span>HTML5でサイトが作られる機会が少し・・・</span></p>

 </section>

</section>
※見出し要素がない部分でsectionを使用してはいけない

最初のセクションにh1の見出しがありますが、その後のセクションには見出し要素がなくp要素やspan要素のみでマークアップされてしまっています。セクションには見出しが必要になりますのでこの書き方は間違いになります。正しくは次の図のようにします。

【section要素:正しいマークアップの例】

<h1>MdN Design Interactive</h1>
<p>Webデザインとグラフィックの総合情報サイト・・・</p>
<section> ↓ このsectionの見出し
 <h2>HTML5でサイトをつくろう!</h2>
 <p>ゼロからはじめるHTML5でのサイト制作の連載が・・・</p>
 <section> ↓ このsectionの見出し
  <h3>第1回 HTML5でサイトをつくろう!・・・</h3>
  <p>最近話題になっているHTML5ですが、・・・</p>
 </section>
 <section> ↓ このsectionの見出し
  <h3>第2回 HTML5で使い方が変更されたタグをまとめよう</h3>
  <p>HTML5でサイトが作られる機会が少し・・・</p>
 </section>
</section>
※sectionには必ずh1~h6要素を使って見出しを入れる必要があります
各セクションごとに見出し要素があることできちんと章や節を表せています。
【section要素:正しいマークアップの例】

<h1>MdN Design Interactive</h1>
<p>Webデザインとグラフィックの総合情報サイト・・・</p>
<section> ↓ このsectionの見出し
 <h1>HTML5でサイトをつくろう!</h1>
 <p>ゼロからはじめるHTML5でのサイト制作の連載が・・・</p>
 <section> ↓ このsectionの見出し
  <h1>第1回 HTML5でサイトをつくろう!・・・</h1>
  <p>最近話題になっているHTML5ですが、・・・</p>
 </section>
 <section> ↓ このsectionの見出し
  <h1>第2回 HTML5で使い方が変更されたタグをまとめよう</h1>
  <p>HTML5でサイトが作られる機会が少し・・・</p>
 </section>
</section>
※見出し要素はすべてh1でも、階層毎にh1,h2,h3とわかりやすくしてもよい

section要素などを使用してセクションを明示化させると、アウトラインの判別に見出しのレベルが関係なくなります。ですので、すべての見出しをh1要素でマークアップしても間違いではありません。

これまでは「h1要素の使用は1ページの中では1回のみ」、「見出し要素はh1,h2,h3と順番で使用する」などとされてきましたが、すべての見出しをh1要素で記述するのは仕様書でも紹介されています。
このように考えると、SEO対策に有効と言われているh1タグにしてしまうほうが良いと思いますが、SEOスパムになってしまうのではという懸念もあります。


ですので、今までのように原稿の内容に応じて見出しの順番をh1,h2,h3としているサイトの方が多い印象があります。これは自分でサイト制作をする際にどちらかの方法に統一するよう推奨されているので制作時にルール付けをするのが良いと思います。

HTML5では、セクションを明示することが推奨されていますが、全てのページでセクションを明示化するのは原稿によって大変になるので、実際はsectionを省略しているサイトも多くあります。特にブログやニュースリリースなど頻繁に更新する際にCMSなどを使用してWEB制作の担当者以外が更新する場合は、あまり仕様だからといってすべてマークアップしていくと更新が難しくなってしまいますので、サイト全体でのマークアップのガイドラインを策定することが良いと思います。

ここで一番初めにセクションわけをした原稿をsection要素を使用してマークアップしてみた物がこちらになります。

【section要素を使用してマークアップ】

<body>
<h1>MdN Design Interactive</h1>
<p>Webデザインとグラフィックの総合情報サイト・・・</p>

<section>

 <h2>ゼロからはじめるHTML5でのサイト制作</h2>
 <p>本連載は、HTML5をはじめてやってみようという人に、・・・</p>
 <section>
  <h3>第1回 HTML5でサイトをつくろう!xhtmlからHTML5へ</h3>
  <p>最近話題になっているHTML5ですが、どこからやって・・・</p>
 </section>

 <section>
  <h3>第2回 HTML5で使い方が変更されたタグをまとめよう</h3>
  <p>HTML5でサイトが作られる機会が少しづつ増え、・・・</p>
 </section>

 <section>
  <h3>第3回 HTML5で新しく定義された新要素をまとめよう</h3>
  <p>HTML5になって新しく定義された新要素(タグ)が多く・・・</p>
 </section>
</section>

<section>

 <h2>他の連載記事</h2>
 <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
 <section>
  <h3>第1回目 連載記事タイトル01</h3>
  <p>テキストテキストテキストテキストテキストテキスト</p>
 </section>

 <section>
  <h3>第2回目 連載記事タイトル02</h3>
  <p>テキストテキストテキストテキストテキストテキスト</p>
 </section>
</section>
</body>
※bodyタグの直下にはいれなくてよい

このような形でsection要素をマークアップしていくとbodyタグ直下の全体をsection要素で囲まなくて良いのか?と思う人もいると思いますが、bodyタグはセクショニング・ルートというカテゴリーに属しており、section要素でマークアップする必要はありません。これらにつきましてはアウトラインの項目をまとめる際に詳しく説明します。

【CSSでレイアウトする際はclass属性やid属性を使用します】

<body>
<h1>MdN Design Interactive</h1>
<p>Webデザインとグラフィックの総合情報サイト・・・</p>

<section class="post"
 <h2>ゼロからはじめるHTML5でのサイト制作</h2>
 <p>本連載は、HTML5をはじめてやってみようという人に、・・・</p>

 <section class="entry"
  <h3>第1回 HTML5でサイトをつくろう!xhtmlからHTML5へ</h3>
  <p>最近話題になっているHTML5ですが、どこからやって・・・</p>
 </section>

 <section class="entry"
  <h3>第2回 HTML5で使い方が変更されたタグをまとめよう</h3>
  <p>HTML5でサイトが作られる機会が少しづつ増え、・・・</p>
 </section>

 <section class="entry"
  <h3>第3回 HTML5で新しく定義された新要素をまとめよう</h3>
  <p>HTML5になって新しく定義された新要素(タグ)が多く・・・</p>
 </section>
</section>

<section class="post"
 <h2>他の連載記事</h2>
 <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
 <section class="entry"
  <h3>第1回目 連載記事タイトル01</h3>
  <p>テキストテキストテキストテキストテキストテキスト</p>
 </section>

 <section class="entry"
  <h3>第2回目 連載記事タイトル02</h3>
  <p>テキストテキストテキストテキストテキストテキスト</p>
 </section>

</section>

</body>
※CSSでスタイルする場合はclass属性やid属性を指定する

このように見るとdivタグと使い方が同じではないか?という方もいると思います。見た目にはタグが置き換えられたように見えますが、ここからはsection要素とdiv要素の使い分けについてまとめたいと思います。

 

section要素とdiv要素の使用用途について

2つ目の特徴としてあげたようにsection要素はコンテナ要素ではありませんので、レイアウト目的で領域を囲むという使い方はできません。CSSなどのスタイリングのために要素が必要になった場合はdiv要素が推奨されています。

section要素をコンテナ要素として使用してはならないということですが、HTML5ではdiv要素は使ってはいけなく、section要素でマークアップしていくもので、div要素は使っていけないと初期の段階で思った人もいるかと思いますが、section要素は明示的にアウトラインを形成したい場合に使うもになりますので、レイアウト目的の場合はいままでどおりdiv要素を使います。簡単な2カラムのサイトを例に見てみたいと思います。
一般的に2段組みレイアウト

一般的に2段組みレイアウト

上の図に示すような2カラムレイアウトのサイトを制作すると仮定します。旧来のマークアップ方法ですと、コンテンツエリアをdivで囲みid名contentsとして、サイドバーエリアをdivで囲みid名sidebarとつけてフロートさせるようなやり方をする方が多かったのではないでしょうか。

内容を考えずにdiv要素をsection要素に置き換えはいけません

内容を考えずにdiv要素をsection要素に置き換えはいけません

上記はコンテンツエリアと、サイドバーエリアにfloatのleftとrightをそれぞれにかけて2カラムレイアウトをした例です。中に何をいれるかなどを考えずに、section要素でそれぞれのエリアを囲みfloatをかけしてしまった悪い例です。

CSSでレイアウトする際のみの場合はdiv要素を使用してもよい

CSSでレイアウトする際のみの場合はdiv要素を使用してもよい

bodyタグ開始後すぐにサイトの説明文を入れてサイトの内容を伝えたり、SEO対策の一環として入れるというサイトがよありますが、この場合はキャッチコピーを見出しとして使う場合はhgroup要素で囲みCSSで位置を調整するか、従来のようにキャッチコピーをp要素を使用して対応する場合はhgroup要素は使いません。

こちらでは2カラムレイアウトを実現するためにdiv要素にfloatのleftとrightをそれぞれかけてあります。また、この後にsection要素・article要素などコンテンツに合ったセクショニング・コンテンツを使用してアウトラインを形成していく正しい例です。このようにレイアウトを変更する場合などは旧来通りdiv要素を使って問題ありません。


今回はsection要素の使い方の基本をまとめてみました。section要素だけを考えるとそう難しいことはないのですが、これに次回まとめるarticle要素が入ると原稿によってどのようにすればよいか判断に迷う部分がでてきます。そちらについては、次回article要素をまとめまして2つの使い方などを紹介したいと思います。今回まとめました部分は人によっては違う考えもあると思いますので、これは違うといったご意見がございましたらブログの方にお寄せいただけますと幸いです。


profile
●ハヤシユタカ 1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークスを立ち上げ、WEBの企画・制作、セミナー講師やWEB運用の企業研修などを行う。また、WEB制作に役立つ情報を集めて制作のヒントになるブログを更新している。

●HTML5でサイトをつくろう: http://www.html5-memo.com/
●Webデザインクリップ: http://webdesignmatome.com/

twitter facebook google+ このエントリーをはてなブックマークに追加 RSS