HTML5の勉強を始めた際に使い方に迷う新要素「section要素」の基本と使い方をまとめてみました【MdN連載第4回目】

HTML5の勉強を始める際に新要素の使い方などを勉強すると思いますが、その際にまず迷うのが「section要素」と「article要素」はどういうときに使うのだろか?使い分けはどういうようにするのか?という疑問にほとんどの人が行きつくとおもいます。

しかしこれはコンテンツの原稿によっても変わるものなので何もない段階で要素だけ見て「section要素」はこうする、「article要素」はこうするという絶対的なルールはありません。原稿内容によってセクション分けをする形になります。

逆にヘッダー部分に使う「header要素」、フッター部分に使う「footer要素」、主要ナビゲーションに使う「nav要素」要素などは使い方が明確でわかりやすいですよね。

仕様書やHTML5の書籍などを見ても概念と使い方の例が書いてあるのでなんとなくは理解できますが、いざ使おうと思った際にそのサンプルと違う原稿構成の場合に、この場合はどうだろう?と思ってしまう場合がよくあります。

そこでMdN Design Interactive連載の第4回ではこの『section要素』について、第5回では『article要素』についての基本と簡単な使い方の例をまとめていきます。あちらではソースが画像になってますので、このブログの方でもソースをテキストにし、一部の内容を変えてまとめてみたいとおもいます。

記事の方向性としては技術仕様書などを読む前の人でHTML5を勉強したいという人に向けて簡単な部分からまとめていきます。

またWEB制作会社などで仕事をする際にはクライアントの要望に沿って作成するため、仕様を厳格に守って作ることができない場合の方が多くあるので、制作後の運用管理を含め簡単に更新できるような形で考えてみたいとおもいます。こちらについてはいろいろなご意見があるかと思いますが、まずHTML5を勉強するきっかけになればと思います。少し理解したら仕様書や書籍でより細かい部分を勉強していくことでより理解が深まると思います。

またこの2つの要素は原稿の構成や制作者の考え方によって使われ方が異なる場合もあるとおもいますので、今回の記事の内容もおかしな部分やこうした方がよいというアドバイスがございましたらコメントいただけますとうれしいです。

MdN Design Interactiveの第4回目のURLはこちらになります。
HTML5で新しく定義された新要素『section要素』の使い方の基本をまとめよう

HTML5でのセクションという考え方

この2つの要素を理解する前に「セクション」の意味を理解する必要があります。

セクションとは章や節や項のように、見出しとそれに関する内容というように階層構造(※アウトライン)になる範囲を定義する領域になります。
通常は最初に見出しがあり、その後にそれに関する文章などが続きます。本来ドキュメントというのは、セクションの塊でWebサイトやブログや書籍などもそうです。

アウトラインについてはこちらの記事でもとりあげております

MdNさんの連載を例にすると『MdN Design Interactive』というサイトの連載のひとつとして『ゼロからはじめるHTML5でのサイト制作』というコーナーがあり、2週間に一度記事が追加される形で連載を行っております。サイトには他の連載も同様にあり、各ページが作られていきます。これをセクションわけしてみると下記の図のようになります。

セクションわけをした図

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

xhtml1.0やhtml4でこれをマークアップする際は見出し要素(h1~h6)を使用して、大見出しにはh1要素、中見出しにはh2要素、小見出しにはh3要素となります。これはxhtml1.0やHTML4でも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回目 連載記事タイトル01</h3>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

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

このソースを画像で見る(画像の方が見やすいです)

このマークアップはWebサイトを作成したことがある人には馴染みのあるものだと思います。

サイト名に当たる部分を<h1>タグとして、各連載のタイトルにあたる部分を<h2>タグにして、各連載記事タイトルを<h3>を使用してマークアップします。

しかしこのままでは、どこまでが1つのセクションで構成しているのかを明示的に示すことができませんでした。

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

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

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


<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回目 連載記事タイトル01</h3>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>

</div>

このソースを画像で見る(画像の方が見やすいです)

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

HTML5の新要素section要素の使い方

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

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

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

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

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

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

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

一つ目の特徴として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>

このソースを画像で見る(画像の方が見やすいです)

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

使い方の正しい例:sectionには必ずh1~h6要素を使って見出しを入れる必要があります


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

    <section>
    	<h2>HTML5でサイトをつくろう!</h2> <!-- sectionに見出しになります -->
        <p>ゼロからはじめるHTML5でのサイト制作の連載が・・・</p>

        <section>
            <h3>第1回:HTML5でサイトをつくろう!・・・</h3> <!-- sectionに見出しになります -->
            <p>最近話題になっているHTML5ですが、・・・</p>
    	</section>

        <section>
            <h3>第2回HTML5で使い方が変更されたタグをまとめよう</h3> <!-- sectionに見出しになります -->
            <p>HTML5でサイトが作られる機会が少し・・・</p>
    	</section>

 </section>

このソースを画像で見る(画像の方が見やすいです)

各セクションごとに見出し要素があることできちんと章や節を表せています。
まずsection要素を使う場合はその要素の中に見出しとなる物があるかを探すとわかりやすいかもしれません。

使い方の正しい例:見出し要素はすべてh1要素でもよい


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

    <section>
    	<h1>HTML5でサイトをつくろう!</h1> <!-- sectionに見出しになります -->
        <p>ゼロからはじめるHTML5でのサイト制作の連載が・・・</p>

        <section>
            <h1>第1回HTML5でサイトをつくろう!・・・</h1> <!-- sectionに見出しになります -->
            <p>最近話題になっているHTML5ですが、・・・</p>
    	</section>

        <section>
            <h1>第2回HTML5で使い方が変更されたタグをまとめよう</h1> <!-- sectionに見出しになります -->
            <p>HTML5でサイトが作られる機会が少し・・・</p>
    	</section>

 </section>

このソースを画像で見る(画像の方が見やすいです)

一見違和感のあるマークアップですがセクションを明確にした場合には、見出し要素はすべてh1でも、階層毎にh1,h2,h3とわかりやすくしてもよいです。

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

いままでは「h1要素は1ページの中では1回のみ使用」「見出し要素はh1,h2,h3と順番で使用する」などとされてきましたが、すべての見出しをh1要素で記述するのはHTML5の仕様でも紹介されています。

このように考えるとSEO対策に有効といわれているh1タグを全て使う方が良いと思いますが、SEOスパムになってしまうのではという懸念もあります。ですので今までのように原稿の内容に応じて見出しの順番をh1,h2,h3としているサイトの方が多い印象があります。これは自分でサイト制作をする際にはどちらかの方法に統一するよう推奨されているので、制作時にマークアップのルール決めをするのが良いと思います。

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

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

一番上のセクションわけした図のソースにsection要素を追加


<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>

このソースを画像で見る(画像の方が見やすいです)

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

CSSでスタイルする場合はいままでどおりclass属性やid属性を指定


<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>

このソースを画像で見る(画像の方が見やすいです)

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

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

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

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

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

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

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

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

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

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

今回はsection要素の使い方の基本をまとめてみましたがいかがでしたでしょうか?

section要素だけを考えるとそう難しいことはないのですが、これに次回まとめるarticle要素が入ると原稿によってどのようにすればよいか判断に迷う部分がでてきます。そちらについては次回article要素をまとめましてから2つの使い方などをいろいろなサンプルを作ってまとめてみたいとおもいます。

今回まとめました部分は人によっては違う考えもあるとおもいますので、これは違うなどご意見・ご感想いただけますとうれしいです。

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

この記事に関連する記事