"

セクショニングコンテンツ! ‐ HTML5で使用するタグの一覧とざっくり説明その2 ‐

セクショニングコンテンツについて

HTML5になって、機械がサイトのデザインを見ないでソースコードだけを見ても「その一文の重要度」や、「見出しと文章・文節の区別」などを理解できるようにいろいろなタグや考え方が増えました。その中のひとつに「セクション・セクショニングコンテンツ」というのがありまして、

どこからどこまでが文章なのか、どこまでがひとかたまりなのかを表現するタグたちを「セクショニングコンテンツ」といいます。

MISSION:セクショニングコンテンツに含まれるタグと含まれそうで含まれないタグを整理すること。

1.セクショニングコンテンツに分類される4つのタグで、以下の制約(ルール)があります。

  1. セクショニングコンテンツには基本的に見出し(<h1>など)の項目が必要
  2. セクショニングコンテンツでも<nav>と<aside>は内容的に見出しが付けれないときは無理につけなくてよし。
  3. 中に何か入ってないとエラー(減点)

<article>

記事を表すタグ。ブログの記事の一覧画面やコメントの投稿など、すべての文章がひとつのことを書いてるのではなく、個別で書いてあるものはこれになる。

<aside>

本文の流れとは直接関係ない、注釈や別記のような扱いをするもの。広告も含む。
内容によっては見出しがないものも意味あい上は仕方ないと思われる。

<nav>

メインナビゲーション=メインメニューのタグ、1ページに何個もあるのは推奨されない。他のナビにはrole=”navigation”で対応するらしい。

<section>

章・節などに使われるタグ。記事(article)の中に節(section)が入れ子になったり、章(section)ごとにコメント(article)が入れ子になったりすることはありそう。

2.日本語的にはセクションかと思ってしまうけど、フローコンテンツに分類されるタグ

<h1>~<h6>

見出し(や題名)タグ。見出しがあることで、暗黙的にセクションが始まる意味をかもし出すのでセクションの区切りとしても使えてしまう。

<header>

ヘッダータグ。現在の標準では、ページ全体のヘッダーはbodyの直下にあって、中にページタイトル(h1)とメインメニュー(nav)が来ることが多い。
sectionやarticleの中で使うと(ページ全体のヘッダーではなく)そのsectionやarticleのヘッダーとして日付や作成者を内蔵する機能になる。

<footer>

フッタータグ。headerと同じ使い方。現在の標準ではページ全体の連絡先やコピーライト、フッターメニューなどを内蔵することが多い。
個別のarticleやsectionの連絡先などを内臓するために使われる。

3.ちょっと使い方が特殊なタグ

<address>

アドレスタグは住所・電話番号・メールアドレス・製作者に近い内容のみに使える。このページで紹介したすべてのタグを中に入れてはいけない。不思議なタグ。
フッター内でしか使えないと思って問題ない気がします。

というわけで、今回はセクショニングコンテンツとそれに似ているタグを整理しました。

ところが、これを覚えるよりも使って慣れる方が大事という真実もありますので(略)

しかし、1つの<section>に<article>(記事)が2つある場合や、<article>自体が複数の<section>でできている場合などもあると思います。

日本語的意味合いだけで考えると入れ子が非常に複雑になりそうな気もするので、ほどほどに使用するタグを絞った方がわかりやすい気もします。今後のブラウザの問題もあるかもしれませんが、時代の中で変わっていくかもしれないので新しいバージョンのHTMLなどが出た時は(他のタグもそうですが)内容の変化に要注目です。