<section>タグの解説
<section>は、ウェブページ内の文章やコンテンツの一部をまとめて、その部分がひとつのセクションであることを定義します。「セクション」とは、ドキュメント全体のうち、ある部分からある部分までを「ひとつのまとまり」として見なす節目のことです。
例えば、このページは<section>要素というひとつの題材を扱っていますが、解説、特徴、指定できる属性など見出しをつけて章に分けています。このような構造の場合に、見出しの先頭からその話題の終わりまでをひとつのセクションとみなしてまとめることができます。
<article>と<section>の使い分け方ですが、<article>は独立した記事として切り出せる範囲を表します。例えば、小説を扱う場合に物語全体を<article>で囲い、一章、二章という区分を<section>で表します。章ごとの区切りを<article>で表した場合、前後の文脈を断ち切ったときに意味が通らなければ<section>を採用すべきです。逆に、短編小説のようにひとつの章を切り出しても意味が完結する内容であれば、<article>で複数に分けても問題ありません。
人間は文字の大きさやデザイン、そして書かれている文字列そのものによって、文章の意味や構造を把握する能力を持っています。しかし、コンピュータは人間の言語を理解することができないため、HTMLによって文章のアウトラインを明示する必要があります。
<section>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- この要素はセクショニング・コンテンツなので、文章構造のアウトラインに影響を与えます。
- 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
- 同一のページ内に複数使うことができます。この要素自体を入れ子にする構造も許可されています。
- 原則として見出しを含むことを想定しています。必ず子要素に
<h1>〜<h6>を設置しましょう。
<section>要素に指定できる属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<section>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。<section>要素はページの中で特定のコンテンツの範囲を表すために使用します。特別な属性や機能は持たないため、あくまで「ここからここまで」と範囲を示す役割りとなります。
<section>
ページの中で特定のコンテンツを表す範囲
</section>
それでは、実際に文章をセクショニングする方法を見ていきましょう。以下のように、ひとつの話題について書かれたブログまたはニュース記事があったとします。
<article>
<h1>記事のタイトル</h1>
<p>序章、概要、キャッチフレーズなど。</p>
<h2>見出し</h2>
<p>本文の内容。本文の内容。</p>
<h2>見出し</h2>
<p>本文の内容。本文の内容。</p>
<h2>見出し</h2>
<p>本文の内容。本文の内容。</p>
</article>
ここに<section>を追加すると、記事の構造がより明確になりソースコードも把握しやすくなることが分かります。
<article>
<h1>記事のタイトル</h1>
<p>序章、概要、キャッチフレーズなど。</p>
<section>
<h2>見出し</h2>
<p>本文の内容。本文の内容。</p>
</section>
<section>
<h2>見出し</h2>
<p>本文の内容。本文の内容。</p>
</section>
<section>
<h2>見出し</h2>
<p>本文の内容。本文の内容。</p>
</section>
</article>
これがセクショニングです。さらにヘッダーやフッターを追加して、記事単体の構造を厳密に定義することもできます。
<article>
<header>
<h1>記事のタイトル</h1>
<p>序章、概要、キャッチフレーズなど。</p>
</header>
<section>
<h2>見出し</h2>
<p>本文の内容。本文の内容。</p>
</section>
<section>
<h2>見出し</h2>
<p>本文の内容。本文の内容。</p>
</section>
<section>
<h2>見出し</h2>
<p>本文の内容。本文の内容。</p>
</section>
<footer>
<small>著者や文書の出典</small>
</footer>
</article>
セクショニングの応用例
続いて、記事や文章ではなくウェブサービスの機能やコンテナの側面から考えてみます。例えば、文脈を持たないモジュールやレイアウトのためにブロックを切り分ける際には<div>が最も多く使われます。<div>は透明な箱として意味を持たないため、汎用的なパーツとして重宝するのですが、気を抜くとソースコードが<div>だらけになってしまうことがあります。
<div class="main-contents">
<h1>メインコンテンツ</h1>
<div class="news">
<div class="post">
<h2>新着記事１のタイトル</h2>
<p>記事内容の概要</p>
</div>
<div class="post">
<h2>新着記事２のタイトル</h2>
<p>記事内容の概要</p>
</div>
<div class="post">
<h2>新着記事３のタイトル</h2>
<p>記事内容の概要</p>
</div>
</div><!--/=== news ===-->
<div class="ad">
広告枠
</div><!--/=== ad ===-->
<div class="category">
<div class="icon"><a href="cat1">icon</a></div>
<div class="icon"><a href="cat2">icon</a></div>
<div class="icon"><a href="cat3">icon</a></div>
<div class="icon"><a href="cat4">icon</a></div>
</div><!--/=== category ===-->
</div><!--/=== main-contents ===-->
このようなソースコードはよく見かけるものですが、要素を正しく分類することによって、正確な情報を利用者に伝えることができます。
<main class="main-contents">
<h1>メインコンテンツ</h1>
<section class="news">
<article class="post">
<h2>新着記事１のタイトル</h2>
<p>記事内容の概要</p>
</article>
<article class="post">
<h2>新着記事２のタイトル</h2>
<p>記事内容の概要</p>
</article>
<article class="post">
<h2>新着記事３のタイトル</h2>
<p>記事内容の概要</p>
</article>
</section><!--/=== news ===-->
<section class="ad">
広告枠
</section><!--/=== ad ===-->
<nav class="category">
<div class="icon"><a href="cat1">icon</a></div>
<div class="icon"><a href="cat2">icon</a></div>
<div class="icon"><a href="cat3">icon</a></div>
<div class="icon"><a href="cat4">icon</a></div>
</nav><!--/=== category ===-->
</main><!--/=== main-contents ===-->
上記の中で注目してほしいのは、<article>が<section>の子要素として配置されている点です。単体の記事を扱うページでは<article>が親要素になることが多いのですが、文章全体の文脈が正しければ、このようなセクショニングも可能となります。
上記の例では、class="news"の値を持つ<section>が、ページの一部を構成するコンテンツの範囲を表し、class="post"の値を持つ<article>は、それだけを切り出しても成立する記事単体を表しています。多くの場合、記事ごとに移動するためのリンクを設置するのですが、煩雑になるため省略しています。
広告枠は無名の<div>で囲われることが多いですが、「ここから広告枠が始まります」と明示した方が、よりアクセシビリティを考慮したマークアップだと言えます。
class="category"を持つ要素は、構造から見ても分かる通り文脈を持たないリンクの集合です。このような箇所には、<section>ではなく<nav>を採用すべきです。場合によって子要素はリスト形式やボタン要素に変わることがありますが、ここでは省略します。
<section>の使い分け方
HTML Living Standardの中で<section>はセクショニング・コンテンツに属しています。セクショニング・コンテンツには他に<article>、<aside>、<nav>があります。これらの使い分け方、特に<article>と<section>の使い分け方に関しては上記で説明した通りです。
ページ単体の中で章や説、機能や役割りの範囲を明確にしいたい場合は<section>を、ページから切り出して前後の文脈を断ち切ったとしても、それ自体で完結する意味を持つまとまりであれば<article>を採用します。それ以外に、別のページへ移動するリンク集や操作の手助けになるモジュール群であれば<nav>、<article>に付随する余談や関連情報であれば<aside>という具合に使い分けます。
文章を構造化する際に、これらの要素を無理に使う必要はありません。HTML Living Standardの時代になり、ブラウザの実装も早くなったおかげて、アウトラインの格付けはブラウザが暗黙的に判断してくれます。単純な記事のページであれば、見出しが出現するたびに<section>で囲わなくても、見出しの順序さえしっかり守っていれば問題は生じません。
しかし、正確なセクショニングはソースコードに触れる全ての利用者にとって有益です。ここで言う利用者とは、サイトの閲覧者だけでなく、他の開発者や検索エンジンのロボットも含まれます。規模が大きくなったウェブサイトの機能をコンポーネント化して切り分けたり、多人数で開発する際の管理のしやすさという観点からも有用です。
汎用的な要素だからといって<div>を多様するのではなく、何らかの意味を持つものであれば、それに対応したタグを使うようにしましょう。