タイトルイメージ

HTML5 セクショニングコンテンツ 2014.12.09

HTML&CSS

セクショニングコンテンツとは

HTML5からは新しく「セクション」を示すための要素が追加されました。
それらをまとめてセクショニングコンテンツ(要素)と呼びます。

セクションとは章・節・項のような文章のまとまった範囲のことを指します。
多くの場合は、それは見出しから始まり、その見出しの適用される範囲が一つのセクションということになります。
(セクション≠セクショニングコンテンツです)

あるいは、グローバルナビゲーションのような、他の部分と内容がはっきりと区別されるような部分もセクションとして定義されています。

セクションは、section要素をはじめとするセクショニングコンテンツがない場合でも、見出しの階層構造により、「暗黙のセクション」としてブラウザに認識されています。
しかし、W3Cではセクショニングコンテンツを使用して、はっきりと「セクション」を示すように推奨しています。

暗黙のセクションのイメージoutline1

セクションのイメージ(HTML5)outline2


以下の表の    の部分がセクショニングコンテンツ要素です。

セクショニングコンテンツ
ルート要素 html        
メタデータ関連 head title base link meta
  style script noscript    
セクション関連 body section article aside nav
  h1~h6 main header footer address
テキストのグループ p hr pre blockquote div
  ol ul li    
  dl dt dd figure figicaption
テキストの一部 a em strong small s
  cite q dfn abbr time
  code var samp kbd span
  i b u sub sup
  mark bdi bdo br wbr
  ins del ruby rt rp
組み込み関連 img iframe embed object param
  video audio sourse track canvas
  map area      
表関連 table caption tr th td
  tbody thead tfoot col colgroup
フォーム関連 form fieldset legend label input
  textarea select datalist optgroup option
  button keygen output progress meter
インタラクティブ関連 details summary command menu dialog

セクショニングコンテンツの各要素

section要素

section要素は、章・節・項のような通常は見出しからはじまる一般的なセクションを示すための要素です。
後述のarticle要素、aside要素、nav要素に該当しないセクションに使用します。

また、section要素はCSSなどで表示指定したい場合に使うことはできません。
その場合はdiv要素を使用します。

article要素

article要素は、そのセクションだけで独立した内容となっているセクションを示すための要素です。
新聞や雑誌の一つの記事のようなまとまった内容や、ブログ記事、それに対する各コメントなどに使用します。

例えばブログ記事にarticle要素のタグを付ける場合は、コメント部分を含んだ記事全体を囲み、その後で入れ子のようにしてコメント一つ一つをarticle要素で囲みます。
こうすることで、コメント部分のarticle要素は、記事全体のarticle要素を関連していると意味づけることができます。

aside要素

aside要素は、ページのメインコンテンツには含まれないと考えられるセクションを示すための要素です。
広告を表示するための範囲、記事の紹介文、メインコンテンツの補足記事などの部分で利用されます。

nav要素

nav要素は、ナビゲーション部分のセクションを示すための要素です。
ただし、ナビゲーションと考えられる部分すべてをnav要素でマークアップする必要はありません。
グローバルナビゲーションのみをnav要素でマークアップし、フッター部分のリンクリストなどはfooter要素でマークアップするだけでOKです。

div要素との使い分け

セクショニングコンテンツの各要素は、これまで

というようにdiv要素を使用してきた部分と重なります。
W3Cの考え方に沿えば、これからはできるだけセクショニングコンテンツで示した方が良いようです。

しかしながら、セクションはあくまで文章などの内容のまとまった範囲を示すものなので、セクショニングコンテンツを完全にdiv要素の代わりとして使用するのは間違いです。

使い分けのポイントとして、セクショニングコンテンツの正しい意味をしっかりと把握することが重要です。
まず、header/main/footer要素がセクショニングコンテンツではない、というところから、セクションの考え方を理解するといいかもしれません。

header/main/footer要素に共通しているのは、html文書全体の構造を示す要素であるということです。
(header要素→文書の前置き的内容を示す要素 main要素→文書のメインコンテンツを示す要素 footer要素→文書の付帯情報を示す要素)

一方、セクショニングコンテンツの各要素は、文章の内容を入れ子構造にしてはっきりと区別するために使用します。

このことから、

<div id=”header”>などと、文書そのものの構造を示していたdiv要素はheader/main/footer要素で示す。

<div class=”article/entry”>などと、文書内における文章の構造を示していたdiv要素はセクショニングコンテンツで示す。

というふうに使い分けていくといいと思います。

あと忘れてはならないのは、CSSのためにセクショニングコンテンツを使用しないということですね。
CSSを適用させたい範囲がある場合は、これまで通りdiv要素+class/id属性を使いましょう。

参考

この記事は以下の書籍を参考にして書いています。

HTML+CSSデザイン|基本原則、これだけ。【HTML5 & CSS3対応版】

すべての人に知っておいてほしい HTML5 & CSS3 の基本原則

Thanks for reading to the end!!

コメントを残す

メールアドレスが公開されることはありません。コメントのみの投稿も可能です。

TOPページへ戻る

About

Creator Indexは、Webクリエーター初心者に役立つブログを目指しています。
執筆者自身が日々学んだ内容をアップしていきます。

Author

筆者イメージ

Jun

サイトリニューアルを計画中…