●セクションについて

●section要素

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

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

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

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

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

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

があげられます。

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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