HTMLを勉強していると、section というタグが出てきます。
「section って何を表しているの？」
「文章を囲むだけなら、ほかのタグではだめなの？」
「そもそも section を使うと、何が変わるの？」
このように、section は書き方だけを見ると簡単なのに、何のために使うタグなのかが分かりにくい部分があります。
実際、HTML では画面に表示される見た目だけでは、タグの役割を判断できないものもあります。
section は、Webページ の内容をテーマごとのまとまりとして整理するために使います。
たとえば「会社について」というページなら、「私たちの強み」「サービス内容」「会社情報」といったテーマごとに内容を分けることができます。
ここでは、HTML をこれから学ぶ初心者の方に向けて、sectionタグ の意味や役割、基本的な書き方を分かりやすく解説します。
実際の HTMLコード を見ながら、section を使うとページの内容がどのように整理されるのか、さらに divタグ との違いまで理解していきましょう。
sectionタグとは？まずは意味を理解しよう
section は英語で「部分」「区切り」「章」などを意味する言葉です。
HTML では、1つのページの中にある内容を、テーマごとのまとまりに分けるために使います。
たとえば、会社について紹介するページを考えてみます。
1つのページの中に、
会社について
├─ 私たちの強み
├─ サービス内容
└─ 会社情報
というように、いくつかのテーマについての内容が書かれているとします。
「私たちの強み」「サービス内容」「会社情報」は、どれも会社についての情報ですが、それぞれ扱っているテーマは異なります。
そこで、同じテーマについて書かれている内容を、それぞれ1つのまとまりとして考えます。
たとえば、「サービス内容」に関する部分であれば、次のように section を使って表せます。
<section>
<h2>サービス内容</h2>
<p>Webサイト制作やWebデザインを行っています。</p>
</section>この場合、<section> から </section> までが「サービス内容」というテーマについてのまとまりです。
同じように、「私たちの強み」や「会社情報」について書かれている部分も、それぞれテーマごとのまとまりとして section で表すことができます。
このように section を使うと、1つのページの中で、どこからどこまでが同じテーマについて書かれているのかを、HTML 上で分けて表現できます。
なお、section を使ったからといって、ブラウザ上に特別な枠や背景が表示されるわけではありません。
section は、HTML の中で内容のまとまりを表すために使うタグです。
まずは、
section＝ページの内容をテーマごとに区切るための要素
と理解しておいてください。
sectionタグの基本的な書き方
基本的な書き方は次のとおりです。
<section>
<h2>サービス内容</h2>
<p>Webサイト制作やWebデザインを行っています。</p>
</section>このコードでは、「サービス内容」というテーマについて、見出しと説明文をまとめています。
<section> から </section> までが1つのまとまりで、その中には、そのテーマに関係する内容を入れます。
たとえば、「サービス内容」という section であれば、サービスの特徴や料金、対応している内容など、サービスについて説明するための情報をまとめます。
反対に、会社の所在地など「サービス内容」とは別のテーマの情報まで、同じ section に入れる必要はありません。
つまり、section を使うときは、「この内容は何についてのまとまりなのか」を考えて、そのテーマに関係する内容をまとめることがポイントです。
また、1つのページに複数のテーマがある場合は、それぞれを別の section として分けます。
<section>
<h2>私たちの強み</h2>
<p>豊富な実績と専門的な知識を活かして制作します。</p>
</section>
<section>
<h2>サービス内容</h2>
<p>Webサイト制作やWebデザインを行っています。</p>
</section>
<section>
<h2>会社情報</h2>
<p>東京都にあるWeb制作会社です。</p>
</section>このように、1つのテーマを1つのまとまりとして section で囲むのが、基本的な使い方です。
sectionタグには見出しを付ける？
section を使うときは、その section が何についてのまとまりなのかを示す見出しを付けます。
見出しには、h1〜h6 の見出しタグを使います。
<section>
<h2>HTMLとは？</h2>
<p>HTMLはWebページの構造を作るための言語です。</p>
</section>この例では、h2 の「HTML とは？」が、section のテーマを示す見出しです。
見出しがあることで、この section が「HTML について説明するまとまり」だと分かります。
なお、section の見出しは h2 に限りません。
ページ全体の構成に合わせて、h1〜h6 の見出しタグを使います。
<section>
<h2>HTMLとは？</h2>
<p>HTMLはWebページの構造を作るための言語です。</p>
</section>
<section>
<h3>HTMLの特徴</h3>
<p>HTMLでは、タグを使ってWebページの内容を表します。</p>
</section>
<section>
<h4>HTMLの基本</h4>
<p>HTMLでは、さまざまなタグを組み合わせて内容を記述します。</p>
</section>
<section>
<h5>HTMLを学ぶメリット</h5>
<p>Webページの構造を理解できるようになります。</p>
</section>このように、section ごとに、そのまとまりのテーマを表す見出しを付けます。
では、見出しのない section はどうでしょうか。
<section>
<p>Webサイト制作やWebデザインを行っています。</p>
</section>見出しがない section も HTML として記述できます。
見出しがないだけで、HTML としてエラーになるわけではありません。
ただし、通常の Webページ で使う section については、見出しを付けて使うのが適切です。
この点について、MDN Web Docs では、section を「文書の一般的なセクションを表す HTML 要素」と説明したうえで、「少数の例外を除いて、セクションには見出しを置いてください」としています。
MDN Web Docs は、Webサイト を制作する人向けに、HTML や CSS、JavaScript などの Web技術 について解説しているドキュメントです。Mozilla が運営しており、Web技術 の仕様や使い方を確認するための資料として広く利用されています。
そのため、通常のWebページで section を使う場合は、「見出しのない section も書けるが、テーマを持ったまとまりとして使うなら、そのテーマを表す見出しを付ける」と考えると分かりやすいでしょう。
つまり、section を使うときは、
テーマのある内容を section でまとめ、そのテーマを h1〜h6 の見出しで示す
という形にするのが基本です。
sectionタグを使ったHTMLの基本例
ここまで説明してきた section を、実際の HTML の中で確認してみます。
たとえば、Webページ の主要な内容を main でまとめ、その中に1つの記事を article として配置し、記事の中をテーマごとに section で分けると、次のように書けます。
<main>
<article>
<h1>HTMLの基本</h1>
<section>
<h2>HTMLとは？</h2>
<p>HTMLはWebページの構造を作るための言語です。</p>
</section>
<section>
<h2>HTMLの書き方</h2>
<p>HTMLでは、タグを使って内容を記述します。</p>
</section>
<section>
<h2>HTMLの基本タグ</h2>
<p>見出しや段落など、さまざまなタグがあります。</p>
</section>
</article>
</main>このHTMLを内容の構造として見ると、次のようになります。
main
└─ article「HTMLの基本」
├─ section「HTMLとは？」
├─ section「HTMLの書き方」
└─ section「HTMLの基本タグ」main はページの主要な内容、article は1つの記事としてまとまった内容、section はその記事の中にあるテーマごとのまとまりを表しています。
この例では article の中に section を配置していますが、section の中に article を配置することもあります。
たとえば、ニュースページで「ニュース」という1つのテーマを section でまとめ、その中にそれぞれ独立したニュース記事を article として配置するような構成です。
<section>
<h2>ニュース</h2>
<article>
<h3>新サービスを開始しました</h3>
<p>新しいサービスの提供を開始しました。</p>
</article>
<article>
<h3>イベントを開催します</h3>
<p>来月、イベントを開催します。</p>
</article>
</section>このように、article と section は、互いに入れ子にできます。
それぞれの内容にどのような意味があるのかを考えて、適切な要素を使います。
なお、main が絡む場合には制約があり、main を article や section の中に入れることは仕様上禁止されています。
sectionタグの役割は？使わなかったらどうなる？
HTML を学び始めたばかりの頃は、「sectionタグ を使わなくても、文字や画像はちゃんと画面に表示されるのでは？」という疑問を持つ方が多いと思います。
結論から言うと、その通りです。sectionタグ を一切使わずにコードを書いたとしても、Webページ そのものはブラウザに正しく表示されます。
エラーが起きて画面が真っ白になるようなこともないため、「section を使わない＝間違い」というわけではありません。
では、なぜわざわざ sectionタグ を使うのでしょうか。それは、sectionタグ の本当の役割が「画面を見る読者（人間）のため」ではなく、「ページを読み取るコンピューター（ロボットやシステム）に、内容の正確な構造を伝えるため」だからです。
具体的には、sectionタグ を使わないと次のような不都合が生じます。
1. ページの「正確な目次」が作れなくなる
本に目次があるように、Webページ にも裏側に「目次（アウトライン）」という構造が存在します。見出し（hタグ）だけを置いておけば、なんとなく目次は作られます。
しかし、「hタグ（見出し）だけではダメな理由」がここにあります。hタグ だけを置いた状態だと、コンピューターには「ここに見出しがある」ことは分かっても、「その見出しに対する具体的な説明文章が、どこからどこまで続いているのか」という終わりの境界線が分かりません。
section で見出しと文章をセットで囲むことで初めて、コンピューターは「ここから始まり、ここで終わる、一つの綺麗な『章（テーマ）』である」と完璧に認識できます。
これが、検索エンジン（Googleなど）にサイトの構造を正しく評価してもらうためにも重要になります。
2. 目の不自由な方の「音声読み上げナビゲーション」が壊れる
Webページ は、画面で「見る」だけのものではありません。目が不自由な方は、画面の文字を音声で流す「スクリーンリーダー（画面読み上げソフト）」を使ってホームページを記述順に聞いています。
このとき、sectionタグ で正しく章分けされていると、読み上げソフトが「次の章へジャンプする」「この章を丸ごとスキップする」といった便利なナビゲーションを行えるようになります。
もし sectionタグ がないと、この章ごとのスキップ機能が使えず、ユーザーは聞きたい情報にたどり着くために、ダラダラと長い文章をすべて最初から聞き続けなければならなくなります。
よくある疑問：1つの見出しの中に複数の文章がある場合、途中でsectionを閉じてもいいの？
文章が長くなってくると、「途中で一度 section を閉じて、新しく section を開き直したほうがいいのかな？」と迷うかもしれません。
結論から言うと、途中で section を閉じてはいけません。
sectionタグ は「1つのテーマ（章）」を囲むためのものです。ですから、その見出し（テーマ）に関係する話が続いている限りは、どれだけ文章（pタグなど）が長くなろうとも、途中で閉じずに1つの section の中にすべて収めるのが正しい書き方です。
もし途中で section を閉じて、見出しのない新しい section を始めてしまうと、コンピューターは「ここから、タイトル（見出し）の存在しない謎の新しい章が始まったぞ？」と混乱してしまい、先ほど説明した「正しい目次」や「音声読み上げ」の構造が崩れてしまいます。
話のテーマが完全に「次の別のトピック」に移るまでは、じっくり腰を据えて1つの section の中で文章を書き進めてください。
sectionタグとdivタグの違い
HTML を書き始めると、「section も div も要素を囲むタグなのに、何が違うの？」と疑問に感じることがあります。
この2つの違いをシンプルにまとめると、次のとおりです。
| タグ | 基本的な役割 |
|---|---|
| section | テーマのある内容のまとまりを表す |
| div | 特別な意味を持たず、要素をグループ化する |
つまり、section には「この部分は、あるテーマについてまとめられた内容です」という意味があります。
一方、div にはそのような意味はありません。
初心者の方は、「section＝意味のあるまとまり」、「div＝特別な意味を持たないグループ」と考えると分かりやすいでしょう。
sectionを使う場合
たとえば、「サービス内容」というテーマについて、見出しと説明文をまとめる場合です。
<section>
<h2>サービス内容</h2>
<p>Webサイト制作を行っています。</p>
</section>この section で囲まれた部分は、「サービス内容」という1つのテーマについて説明しています。
そのため、ここでは単に要素をまとめるのではなく、「ここはサービス内容についての1つのセクションである」と HTML 上で意味を持たせるために section を使います。
divを使う場合
要素をまとめたいものの、そのまとまり自体に特別なテーマや意味を持たせる必要がない場合は div を使います。
<div class="box">
<p>サービス内容</p>
</div>たとえば、この div で囲んだ部分に枠線を付けたり、背景色を変えたりするためにグループ化しているのであれば、div で問題ありません。
この場合、「ここからここまでが1つのテーマについてのセクションである」という意味を HTML に持たせたいわけではありません。単に要素を1つのグループとして扱いたいため、div を使っています。
このように、section と div はどちらも要素を囲むことができますが、囲んだ部分に「テーマのある内容のまとまり」という意味を持たせるかどうかが大きな違いです。
テーマのある内容のまとまりなら section、特別な意味を持たせずに要素をまとめるだけなら div と覚えておいてください。
sectionタグを使うときに覚えておきたいポイント
section の意味や書き方、div との違いについて解説しました。
最後に、section を使うときに覚えておきたいポイントを整理します。
まず、section はページの中にある、テーマを持った内容のまとまりを表す要素です。
単に文章や要素を囲むためのタグではなく、「ここからここまでが1つのテーマについてまとめられた内容である」という意味を HTML に持たせるために使います。
また、section には、そのセクションが何についての内容なのかを示す見出しを付けることが推奨されています。
たとえば、「サービス内容」というテーマを扱う section であれば、そのテーマを示す見出しを置きます。
MDN Web Docs でも、少数の例外を除いて、セクションには見出しを置くよう案内されています。
一方、section は見た目を変えるためのタグではありません。
section を使っただけで、ブラウザに特別な枠や背景が表示されるわけでもありません。
また、section を使わなくても Webページ は表示できます。
section を使うことで変わるのは、ページの表示そのものではなく、テーマごとの内容のまとまりを HTML 上で意味のある構造として表現できることです。
そして、テーマとしての意味を持たせる必要がなく、単純に要素をグループ化したい場合は div を使います。
・section：テーマのある内容のまとまりを表す
・div：特別な意味を持たず、要素をグループ化する
・section：見た目を変えるためのタグではない
・sectionを使わなくても、Webページは表示できる
・sectionを使うことで、テーマごとの内容のまとまりをHTML上で表現できる
この違いを理解しておけば、section と div を「どちらも内容を囲むタグだから」という理由だけで使い分ける必要はありません。
section は、ページの内容をテーマごとに整理するためのタグです。
