HTMLを勉強していると、<section>というタグを見かけることがあります。「divと何が違うの？」「どこからどこまでを囲めばよいの？」と迷う方も多いのではないでしょうか。
section要素は、Webページの中にある意味のある1つの話題をまとめるためのHTML要素です。内容に合った見出しと一緒に使うと、ページの構造が人にもブラウザにも伝わりやすくなります。
この記事では、HTMLのsection要素の意味と基本的な書き方、div・articleとの違い、CSSで見た目を整える方法まで初心者向けに順番に解説します。実際にコードを書き、ブラウザで表示を確認してみましょう。
HTMLのsection要素とは
section要素は、文書やWebページの中で、1つのテーマに沿った内容をまとめるために使います。日本語の「節」や「章」に近い役割です。
たとえば、サービス紹介ページに「サービスの特徴」「導入のメリット」「利用の流れ」という話題がある場合、それぞれを別のsection要素で囲めます。
上の図では、3つの話題がそれぞれ別のsection要素に対応しています。見た目を四角く囲むことが目的ではなく、「この範囲は同じ話題です」とHTMLの構造で示すことが目的です。
section要素の基本的な書き方
まずは最小限の例を見てみましょう。section要素は開始タグの<section>と終了タグの</section>で内容を囲みます。
<section>
<h2>サービスの特徴</h2>
<p>初心者でも使いやすいシンプルなサービスです。</p>
</section>h2要素は、このセクションが何について書かれているのかを示す見出しです。p要素には、その見出しについて説明する文章を書きます。
多くの場合、section要素には内容を表す見出しを入れます。見出しを付けられない単なる囲みであれば、sectionよりもdivが適している可能性があります。
変更前のHTMLをsectionで整理する
ここからは、見出しと段落だけが並んだHTMLを、話題ごとのsection要素へ変更します。最初のindex.htmlは次の状態です。
<main>
<h1>私たちのサービス</h1>
<h2>サービスの特徴</h2>
<p>分かりやすい画面で、初めての方でも簡単に使えます。</p>
<h2>導入のメリット</h2>
<p>毎日の作業時間を減らし、本来の仕事に集中できます。</p>
</main>ブラウザには見出しと文章が順番に表示されます。ただし、HTML上では「サービスの特徴」と「導入のメリット」が、それぞれどこまで続く話題なのかを要素のまとまりとして示していません。
変更前のブラウザ表示では、2つの見出しと文章が上から順番に並びます。見た目だけでは、それぞれの見出しと説明文が1つの話題としてまとまっている範囲までは分かりません。
section要素を追加した変更後のHTML
それぞれのh2要素と、対応する説明文をsection要素で囲みます。変更後は次のようになります。
<main>
<h1>私たちのサービス</h1>
<section>
<h2>サービスの特徴</h2>
<p>分かりやすい画面で、初めての方でも簡単に使えます。</p>
</section>
<section>
<h2>導入のメリット</h2>
<p>毎日の作業時間を減らし、本来の仕事に集中できます。</p>
</section>
</main>画面に表示される文字は変更前と同じです。section要素は、初期状態では枠線や背景色を付ける要素ではないためです。
上の点線は、ブラウザが自動で表示する枠線ではなく、section要素で囲んだ範囲を示すための説明用注釈です。変更後は「サービスの特徴」とその説明文、「導入のメリット」とその説明文が、それぞれ1つの意味のあるまとまりになります。
一方、HTMLの構造では2つの話題が明確に分かれました。検索エンジンや音声読み上げソフトなどの支援技術も、見出しと内容の関係を理解しやすくなります。
sectionとdivの違い
sectionとdivは、どちらも複数の要素を囲めます。ただし、HTML上で持つ意味が異なります。
| 要素 | 役割 | 使う場面 |
|---|---|---|
section | 1つのテーマを持つ意味のあるまとまり | 見出しを付けて章や話題を分けるとき |
div | 特別な意味を持たない汎用的なまとまり | レイアウトやCSS適用のために囲むとき |
「このまとまりに名前を付けるなら、どのような見出しになるか？」と考えると選びやすくなります。明確な見出しと話題があるならsection、見た目を整えるためだけならdivが基本です。
ただし、CSSはどちらの要素にも指定できます。sectionを使えば自動的に見た目が変わる、という違いではありません。
sectionとarticleの違い
article要素は、記事一覧に並ぶ1件ずつの記事カードを表すときによく使います。ブログのトップページやカテゴリー一覧で、アイキャッチ画像、記事タイトル、抜粋、リンクをまとめたカードを見かけますが、その1枚をarticle要素で囲む形です。
一方、section要素は「新着記事」や「おすすめ記事」のように、同じ話題を持つ範囲全体をまとめます。つまり、1つのsection要素の中に、複数のarticle要素が並ぶ構造が一般的です。
<section>
<h2>新着記事</h2>
<article>
<h3>HTMLの基本</h3>
<p>HTMLの役割と基本的なタグを紹介します。</p>
<a href="/html-basic/">記事を読む</a>
</article>
<article>
<h3>CSSの基本</h3>
<p>文字色や余白を変更する方法を紹介します。</p>
<a href="/css-basic/">記事を読む</a>
</article>
<article>
<h3>JavaScript入門</h3>
<p>Webページに動きを付ける基本を紹介します。</p>
<a href="/javascript-basic/">記事を読む</a>
</article>
</section>
上の図では、外側のsection要素が「新着記事」という1つの話題をまとめています。その中にある3つのarticle要素が、それぞれ独立した記事カードです。
sectionは記事一覧全体のまとまり、articleは一覧に並ぶ1件ずつの記事カード、と覚えると使い分けやすくなります。
CSSでsectionの見た目を整える
変更後のHTMLは話題ごとに整理できましたが、ブラウザ上では区切りが分かりにくいままです。次のCSSをstyle.cssへ追加し、背景色、余白、角丸を設定します。
main {
width: min(100% - 32px, 800px);
margin-inline: auto;
}
section {
margin-block: 24px;
padding: 24px;
border: 1px solid #cbd5e1;
border-radius: 12px;
background-color: #f8fafc;
}
section h2 {
margin-top: 0;
}paddingは枠の内側の余白、marginは枠の外側の余白です。border-radiusは角を丸くし、background-colorは背景色を指定します。
変更後にindex.htmlを再読み込みすると、各セクションが薄い背景色のカードとして表示されます。HTMLで内容のまとまりを作り、CSSでそのまとまりの見た目を整える、という役割分担です。
上の画像では、各section要素の内側にpaddingによる余白があり、2つのカードの間にはmarginによる間隔があります。薄い枠線と背景色、丸い角もCSSで追加した見た目です。
sectionを使うときの注意点
余白を付ける目的だけで使わない
「CSSを指定しやすいから」という理由だけでsectionを増やすと、ページの意味的な構造がかえって分かりにくくなります。レイアウト用の囲みにはdivを使います。
基本的には見出しを入れる
sectionは1つの話題を表すため、その話題に名前を付ける見出しがあるのが自然です。ページ内の見出し階層に合わせてh2やh3を選びます。
すべてをsectionで囲まない
ページ上部にはheader、主要なナビゲーションにはnav、中心的な内容にはmain、独立した記事にはarticleなど、役割がより具体的な要素があります。内容の役割に合う要素を優先してください。
section要素でよくある疑問
sectionの中にsectionを入れてもよいですか？
はい、内容に親子関係があれば入れ子にできます。外側のセクションにh2、内側のセクションにh3を置くなど、見出しの階層も内容に合わせます。
1ページにsectionはいくつ使えますか？
使用できる数に決まりはありません。ただし、細かく分けすぎると構造を追いにくくなります。1つの見出しの下に説明がまとまる単位を目安にしてください。
sectionを使うとSEOに有利ですか？
section要素を追加するだけで検索順位が上がるわけではありません。見出しと本文の関係が分かりやすいHTMLにすることは、読者や検索エンジンが内容を理解しやすいページ作りにつながります。
HTMLの基本構造も確認しておこう
section要素は、通常body要素内のmain要素やarticle要素の中で使います。HTMLファイル全体の書き方がまだ曖昧な方は、次の記事もあわせて確認してください。
HTML要素やタグそのものから復習したい場合は、次の記事から読むと理解しやすくなります。
まとめ
section要素は、Webページ内の意味のある1つの話題をまとめるために使います。基本的には、その内容を表す見出しと一緒に記述します。
独立して読める内容にはarticle、意味を持たないレイアウト用の囲みにはdivを使うのが判断の目安です。まずは見出しと説明文を1組ずつsection要素で囲み、ブラウザで変更前と変更後を見比べてみてください。