sectionタグとは

この記事の目的
今やビジネスにおいてコンピュータ・情報・通信などを中心とする「IT用語」に対する知識は欠かせません。
あまり馴染みがない各分野のIT用語を、なるべく専門用語を使わずに解説していきます。

この記事の対象読者
Web制作を始めたばかりの人。
自社のWebマーケティングを任された人。
専門用語についていろいろ知りたい人。
Webマーケティングを行なっているが、言葉の定義を再確認したい人。
など、Webに限らずDXに携わるすべての方に。

sectionタグとは

sectionタグはHTML5で新たに実装されたタグで、その名の通り、文書の章や節を示す役割を持ちます。文章の一つのまとまりを作るために使うので、例えばブログ記事であれば、記事内のテーマごとに区切ってそれぞれをsectionタグで囲います。

sectionタグを適切に使用することで、文書構造が明確になり検索エンジン等のプログラムが内容を理解しやすくなるメリットがあります。

sectionタグの使い方

sectionタグは汎用的なセクショニングタグ

セクショニングを示すタグにはsectionタグの他に、「articleタグ」、「asideタグ」、「navタグ」、「 headerタグ」、「footerタグ」などがあります。そしてsectionタグ以外のセクショニングタグは以下のような具体的な意味を持つため、使い所がはっきりしています。

対してsectionタグは具体的な意味を持たないため汎用性が高く、様々なセクショニングの場面で使うことができます。articleタグ、asideタグ、headerタグ…、どれにも当てはまらないセクションを構成する際にsectionタグ使用します。

使用例：

<section>
  <h2>見出し</h2>
  <p>テキスト</p>
</section>

見出しタグをつける

sectionタグを使用する際は、基本的にh1~h6の見出しタグを設置します。逆にsectionタグを使用する際の目安として、見出しタグが付けられるかどうかを基準にしても良いと思います。

使用例：

<main>
         <h1>大見出し</h1>
         <article>
                   <section>
                            <h2>見出し</h2>
                            <p>テキスト</p>
                   </section>
                   <section>
                            <h2>見出し</h2>
                            <p>テキスト</p>
                   </section>
         </article>
</main>

見出しがつけられない場合はsectionタグではなくdivタグを使うと良いでしょう。どうしてもsectionタグを使用したいが見出しを入れたくない場合は、非表示の見出しタグを入れて対応します。

divタグとの違い

sectionタグは見出しとセットで使うことで、コンテンツを章立てて文書構造を明確にする役割があります。対して、divタグは特に意味を持たず、HTML要素を囲うために使用します。sectionタグをdivタグにしても成立しますが、その逆は成立するとは限りません。

デザイン・レイアウト目的で使用しない

sectionタグはセクションを区切るために使用します。CSSによるデザインやレイアウト調整、やJavaScriptによるDOM操作のために使用しないようにしましょう。

まとめ

sectionタグをなんとなく使っているとCSSを当てたり、見出し無しで使用しがちですが、それは適切な使用方法ではありませんので正しい使い方を理解しましょう。