『section要素』 / HTML5新要素一覧 

section要素

文章の論理構造を表すための最も基本となる要素。つまり一般的なセクションを表します。

section要素の特徴

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

以上のことを考慮して、それぞれのパターンを確認していきたいと思います。

section要素内の見出しについて

【間違ったマークアップの例 】

<section>
	<h1>HTML5でサイトをつくろう</h1>
    <p>このサイトの目的は・・・</p>
    <section>
    	<p>HTML5の新要素について</p>
        <p>新たに追加された要素には・・・</p>
        <section>
            <p>section要素とは<br />
            <span>一般的なセクションを表します。</span></p>
    	</section>
	</section>
</section>

【正しいマークアップの例 】

<section>
	<h1>HTML5でサイトをつくろう</h1>
	<p>このサイトの目的は・・・</p>
    <section>
        <h2>HTML5の新要素について</h2>
        <p>新たに追加された要素には・・・</p>
        <section>
        	<h3>section要素とは</h3>
            <p>一般的なセクションを表します。</p>
        </section>
	</section>
</section>

上記ソース2つの違いは、各セクションごとにh1~h6の見出し要素があるかどうかです。

【間違ったマークアップ例 】では、最初のセクションにh1の見出しがありますが、その後のセクションには見出し要素がなくp要素やspan要素のみでマークアップされてしまっています。

【正しいマークアップ例 】の方は、各セクションごとに見出し要素があることできちんと章や節を表せています。

section要素とdiv要素の使用用途

section要素をコンテナ要素として使用してはならないということですが、HTML5ではdiv要素ではなくsection要素でマークアップしていくとういう情報を一時期良く耳にしていたので、はじめて勉強用サンプルを作ったときはdiv要素をsection要素に変えただけのサイトを作ってしまいました。

しかし、こうして勉強していくと間違えに気づきます・・・。section要素は明示的にアウトラインを形成したい場合に使うもので、レイアウト目的の場合はdiv要素を使うとういくこと、section要素でマークアップするの意味を完全に取り違えていました。

私と同様にdiv要素はHTML5では使わないと思い込んでいる方もいらっしゃると思いますので、2カラムのサイトを例に、ここで一度整理したいと思います。

【2カラムレイアウトのサイト例】

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

そこで、HTML5からはsectionでマークアップするということを聞いていたので、下の図のような間違ったマークアップをしてしまいました。

【レイアウトの為にsection要素を使った間違いの使用例】

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

【レイアウトにはdiv要素を使う】

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

このようにレイアウトを変更する場合などは旧来通りdiv要素を使って問題ありません。

XHTML1.0からHTML5へ移行する時には、こういった基本的な場面でも悩んでしまう時がありますので、これからも勉強しながらしっかりとHTML5の理解を深めていこうと思います。

尚、section要素はセクショニング・コンテンツに属しますが、それ以外にも『article』、『nav』、『aside』の3っつの要素があるので、必ずしもsection要素を使う訳ではなくマークアップ時には該当セクションに応じて適したセクショニング・コンテンツの要素を使用することにも注意しなければいけません。

参考サイト:

今回の記事で参考にした本

徹底解説HTML5マークアップガイドブック

HTML5の新要素や基本的なマークアップ方法について丁寧に解説が書かれています。
HTML5でサイトを構築する際やこのBlogの記事を書く時の参考にしています。他にもビジュアル系API編もcanvas要素の勉強用に持っています。

Amazonへ

徹底解説HTML5マークアップガイドブック
最終草案対応版―全要素・全属性完全収録

「最終草案対応版―全要素・全属性完全収録」としてverが変わりました。すでに同じ本を持っている場合は追加で買わなくても大丈夫だとおもいましたがなにがなくなって追加されたか興味がありましたので両方買って見ました。

Amazonへ

ブログを作成する際に参考にした本はこちらにまとめてあります。

この記事を書いた人

著者 : ハヤシユタカ

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

最近書いた記事

この記事に関連する記事