sectionタグとは articleタグとの違いと使い方 いらない説の真偽

自社サイトのソースを開くと、見た目には何も出ない section というタグが並んでいた。

画面に表示される文字は同じなのに、なぜわざわざ囲んであるのか。divで囲んでも同じではないか。articleと何が違うのか。ネットには「sectionタグはいらない」という声まである。

制作会社に任せたままで、タグの中身を聞いたことがない。そういう経営者やWeb担当者に向けて、この記事を書いています。

結論から言います。section要素は、見出しを伴う、主題ごとの内容のまとまりを表すタグです。章や節に当たる区切りに使い、中には見出しを置きます。

見た目を整えるためだけの箱なら、divを使います。単独で配っても意味が通る内容なら、articleです。この3つは、「見出しを置ける主題のまとまりか」「単独で成り立つか」という2つの問いで分かれます。

「いらない」という声は、半分だけ当たっています。HTMLの仕様はsectionを必須にしていません。使わなくても、ページは正しく表示され、W3Cの検査サービスでもエラーになりません。

ただし、読み上げソフトを使う人にとっては、sectionに名前を付けるかどうかで、受け取る情報が変わります。この点は、ブラウザで実際に動かして測りました。

検索順位やAI検索の引用に、sectionを使うかどうかが関係するかは、公式の文書に記載が見つかりませんでした。Googleは、HTMLの規格が持つ意味に頼ることはめったにないと書いています。

この記事の軸は、「ページを区切るタグ1つの判断」です。section・article・divのどれにするかを、仕様と計測で決められるようにします。

先に答え：section要素について、確かめられたこと

先に、この記事の結論を表にまとめます。右端の列は、答えの根拠にした資料です。

疑問	答え	根拠にした資料
section要素は何を表すか	見出しを伴う、主題ごとの内容のまとまり	HTMLの仕様（WHATWG）の「区分」の章
見出しは必須か	仕様の内容モデルに必須とは書かれていない。見出しが無いと検査サービスが警告を出す	仕様と、W3Cの検査サービスでの実測
divとの違いは何か	divは意味を持たない箱。sectionは目次に載る区切り	HTMLの仕様（WHATWG）
articleとの違いは何か	単独で配っても意味が通るならarticle。何かの一部ならsection	HTMLの仕様（WHATWG）
「いらない」は本当か	仕様上は必須ではない。使わなくても表示も検査も通る	仕様と、W3Cの検査サービスでの実測
読み上げでは何が変わるか	名前を付けたsectionだけが、区画として扱われる	W3Cの技術文書と、ブラウザでの計測
SEOやAI検索に関係するか	公式に記載なし	検索セントラル、OpenAIとAnthropicの公式文書

表の中で「記載なし」と書いた行は、調べて見つからなかったという報告です。ないことの証明ではありません。

この記事の読み方

悩みの種類によって、読む節が変わります。

いまの悩み	読む節
sectionが何のためのタグか知りたい	section要素とは何か：仕様に書かれた定義
divと見分けがつかない	sectionとdivの違い：見出しを置けるかで分ける
articleとどちらを使うか迷っている	sectionとarticleの違い：単独で成り立つかで分ける
navやasideなど、似たタグが多くて混乱している	nav・aside・header・footer・mainとの使い分け
「いらない」と言われて迷っている	「sectionタグはいらない」は本当か
読み上げソフトの人にどう見えるか知りたい	読み上げから見たsection：名前があるときだけ区画になる
WordPressで使いたい	WordPressでsectionを出す方法
自社サイトの状態を知りたい	弊社の公開記事で数えたsection
すぐ点検したい	今日できる点検

この記事で使う言葉

タグの話は、同じ言葉が場面によって違う意味で使われます。この記事での使い方を、先に決めておきます。

言葉	この記事での意味
要素	開始タグから終了タグまでの全体。section要素と書けば、sectionタグと中身をあわせたもの
区分	HTMLの仕様でいう、sectionやarticleのような、文書を区切る要素の仲間
見出し	h1からh6までのタグで書いた、内容の題
読み上げ	画面を見ずに、ソフトが内容を声に出す仕組み。支援技術とも呼ばれる
ランドマーク	読み上げソフトが、ページ内の区画を飛び移るための目印
区画	ランドマークの1つ。名前を付けたsectionが、この扱いになる

この記事の根拠にした資料

この記事は、次の資料を2026年11月9日に開いて確かめた範囲だけで書いています。

資料	確かめたこと
HTMLの仕様（WHATWG）の「区分」の章	section・article・nav・asideの定義と、使い分けの目安
HTMLの仕様（WHATWG）の「グループ化」の章	mainとdivの定義
W3Cの勧告「ARIA in HTML」	各要素が、読み上げに渡る役割
W3Cの「ARIA Authoring Practices Guide」	区画（ランドマーク）の作り方
W3Cの検査サービス	見出しの無いsectionなどへの警告
Google 検索セントラル	AI機能とウェブサイト、SEOスターターガイド
OpenAIとAnthropicの公式文書	クローラーの種類と役割
WordPressのブロックエディタの公開ソースコード	グループブロックで選べる要素

加えて、ブラウザ（Chromium 145）でHTMLを実際に動かして測った結果と、弊社の公開記事を数えた結果を載せます。弊社の数字は、そう明記します。

Q&Aサイトで見かけた、見た目に出ないタグに意味はあるのかという質問

先日、Q&Aサイトでこのような悩みを拝見しました。

sectionタグのように、画面の見た目に反映されないタグは、使う意味があるのか。クローラーのためなのか、SEOのためなのか、それとも、あとでコードを読む人が分かりやすいだけなのか。

見た目が変わらないものに手間をかける理由が分からない、という気持ちはよく分かります。意味が分からないまま写していると、直したいときに触れなくなります。

制作会社が作ったページをそのまま使っている方にも、同じ疑問は当てはまります。

回答に書かれていたこと

確かめられた回答は1件でした。

その回答は、sectionタグの解説ページを3つ示すだけで、理由の説明は書かれていませんでした。質問者は、3つの候補（クローラー、SEO、人の読みやすさ）のどれが理由なのかを、知らないままだったことになります。

回答のどこまでが確かめられるか

この記事では、質問者の3つの候補を、1つずつ確かめました。

人の読みやすさは、ソースを読む人にとっても、読み上げソフトを使う人にとっても関わります。後者は計測で確かめました。

クローラーとSEOは、公式の文書に記載が見つかりませんでした。ここは確かめられなかったので、断定しません。

質問から読み取れる3つの疑問

質問の文面から、知りたいことを3つに整理しました。この記事は、この3つに順に答えます。

疑問	答える節
sectionは、何のために書くのか	section要素とは何か、読み上げから見たsection
クローラーやSEOに関係するのか	SEOとAI検索では、公式に何と書いてあるか
結局、使うべきか、いらないのか	「sectionタグはいらない」は本当か、sectionを置く前の4つの問い

先に短く答える

sectionは、人のために書くタグです。章や節に当たるまとまりを、ソースの上でも示します。

読み上げソフトを使う人には、名前を付けたsectionが、飛び移れる区画になります。検索やAI検索への効果は、公式の文書に記載がありません。

使うなら、見出しを置きます。見た目の箱が欲しいだけなら、divを使います。

この先の節で、それぞれの根拠を示します。

section要素とは何か：仕様に書かれた定義

まず、HTMLの仕様（WHATWG）が、section要素をどう定義しているかを確かめます。仕様の「区分」の章は、2026年11月6日更新と表示されていました。

仕様の一文

section要素の定義は、次の1文です。

「section要素は、文書またはアプリケーションの汎用的な区画を表す。この文脈での区画とは、通常は見出しを伴う、主題ごとの内容のまとまりである。」（英語の原文を和訳）

ポイントは「通常は見出しを伴う」と「主題ごと」の2つです。見出しが付き、1つの話題でまとまっているものが、sectionの中身です。

仕様が挙げている例

仕様は、sectionに当たるものの例を、次のように挙げています。

仕様の例	身近な言い方
章	長い解説ページの、章ごとのまとまり
タブ付きの画面の、それぞれのページ	料金・特徴・事例のように、切り替えて見せる面
論文の、番号付きの節	「1. 背景」「2. 方法」のような節
ホームページの、紹介・お知らせ・連絡先に分けた区画	トップページの、上から順に並ぶ話題の塊

どれも、題を付けて呼べるまとまりです。題を付けにくい塊は、sectionの例に入っていません。

「汎用」の意味

定義に「汎用的な区画」とあるため、「汎用の入れ物」と読み違える人がいます。

ここでの汎用は、章や節のように、種類を限定しない区画という意味です。

何でも入れてよい入れ物という意味ではありません。仕様は、この読み違えをはっきり戒めています。

その戒めの文は、次の節で引きます。

内容モデルと分類

仕様が、section要素について書いている形式的な事項を、表にまとめます。

項目	仕様の記述
分類	フローコンテンツ、区分コンテンツ、顕在コンテンツ
置ける場所	区分コンテンツが期待される場所
中に置けるもの	フローコンテンツ。段落もdivも見出しも、別のsectionも置ける
開始タグと終了タグ	どちらも省略できない
属性	全要素に共通の属性だけ。sectionだけの専用の属性は無い

中身の制約が緩いので、見出しを置かなくても、仕様の文法はすぐには崩れません。この点は、後の節で検査サービスの結果と合わせて扱います。

標準の見た目

ブラウザは、sectionをどんな見た目で出すのか。Chromium 145で測りました。

項目	測った値
表示の種類	ブロック（divと同じ）
上の余白	0ピクセル
内側の余白	0ピクセル
文字の大きさ	周りと同じ（16ピクセル）

sectionは、divと見分けがつかない見た目で出ます。囲んだだけで、画面は何も変わりません。

だから、見た目の違いで見分けることはできません。違いはソースの中にしか現れません。

sectionとdivの違い：見出しを置けるかで分ける

sectionとdivは、画面では同じに見えます。違いを、仕様の言葉で確かめます。

仕様の目安

section要素の説明の中に、divとの使い分けを示す文があります。

「section要素は、汎用の入れ物ではない。見た目を整えるためだけ、あるいはスクリプトの都合のために要素が必要なときは、div要素を使うことが勧められる。一般的な目安は、その要素の内容が文書のアウトラインに明示的に載る場合にだけ、section要素が適切だというものである。」（英語の原文を和訳）

アウトラインとは、文書の中の見出しを順に並べた目次のようなものです。目次に載る題を持つ塊なら、sectionです。載らないなら、divです。

divの側の説明も、確かめました。仕様は、divを「ほかに合う要素が無いときの最後の手段」と位置づけ、ブログの記事ならarticle、章ならsection、案内ならnavを使う例を挙げています。divの詳しい使い方は、divタグの使い方 横並びと中央寄せの書き方と意味を持つタグとの使い分けで扱っています。

囲みたいものごとの分け方

実務では、次の表のように分けます。

囲みたいもの	選ぶ要素	理由
「料金」「事例」のように、題を付けて呼べる塊	section	目次に載る主題のまとまり
横並びにするためだけの外枠	div	見た目だけの箱
色や余白を付けるためだけの囲み	div	意味が無い装飾
スクリプトで操作するための枠	div	実装上の都合
題を付けるほどではない2、3行の補足	div、または囲まない	目次に載らない

「題を付けて呼べるか」が、いちばん使いやすい問いです。呼べないなら、sectionにしません。

全部をsectionに置き換えてはいけない理由

divをsectionに一括で置き換えれば、意味のあるHTMLになる、というのは誤解です。

題を持たない塊まで、sectionで囲んでしまいます。これは、仕様が戒めた使い方です。

W3Cの検査サービスも、題の無いsectionに警告を出しました。結果は、後の節で示します。

入れ物としてのsectionとdivは、重ねてもよいか

sectionの中にdivを置く、divの中にsectionを置く、どちらも検査サービスでエラーは出ませんでした。

ただし、divの重なりが深くなると、保守が大変になります。

見た目を整えるdivは、意味のあるタグの内側に1段だけ置く、という作り方が無難です。

sectionとarticleの違い：単独で成り立つかで分ける

もう1つ、よく迷うのがarticleとの違いです。sectionとarticleは、どちらも「区分」の仲間で、見た目はやはりdivと変わりません。

仕様の定義

article要素の定義は、次のとおりです。

「article要素は、文書、ページ、アプリケーション、サイトの中の、完結した、または自己完結した作品を表し、原則として、単独で配布したり再利用したりできるものである。」（英語の原文を和訳）

仕様が挙げる例は、フォーラムの投稿、雑誌や新聞の記事、ブログの記事、利用者が書き込んだコメント、独立した部品（ウィジェット）です。

「一部」か「それ自体」か

仕様には、2つの使い分けを直接述べた節があります。守るべき決まりの外にある、参考の節です。

「sectionは、何かの一部をなす。articleは、それ自体で1つの物である。」（英語の原文を和訳）

その節は、続けてこうも書いています。実際の答えは、おおむね「作者の意図による」。判断が割れる場合があることを、仕様自身が認めています。

例で分ける

迷いやすい場面を、表にします。

場面	選ぶ要素	理由
お知らせの記事1本	article	単独で配っても意味が通る
会社案内ページの「沿革」の塊	section	ページの一部で、題を付けて呼べる
お客様の声を1件だけ切り出したもの	article	単独で再利用できる
料金ページの「よくある質問」の塊	section	ページの一部
記事の下に付く、読者のコメント	article	1件ごとに独立した投稿

仕様は、リンゴの品種を紹介する1文を例にしています。

その1文が、章立ての本の1章として入っているなら、sectionです。同じ1文が、単独の投稿や新聞の分類広告として世に出るなら、それ全体が1つの物なのでarticleです。内容が同じでも、置かれ方で答えが変わります。

入れ子にするとき

articleの中に、sectionを置けます。articleの中に、別のarticleも置けます。

仕様の例では、ブログの記事（article）の中に、「コメント」という題のsectionを置き、その中に1件ずつのコメントをarticleで並べています。内側のarticleは、外側の記事に関連するものとして扱われます。

ページ全体が1つの作品のとき

ページの本文が、まるごと1つの作品なら、本文をarticleで囲めます。ただし仕様は、その場合は「技術的には冗長」と書いています。ページ自体が1つの文書なので、わざわざ書かなくても自明だからです。

弊社のサイトのページを確かめると、mainの中にarticleが1つあり、その中に記事の題と本文が入っていました。ここはarticleが付いている例です。付けても付けなくても、仕様の上では問題ありません。

nav・aside・header・footer・mainとの使い分け

sectionの周りには、似た名前の要素がいくつもあります。それぞれが何を表すかを、仕様で確かめます。

nav：案内リンクの塊

nav要素は、ほかのページや、同じページ内の場所へのリンクを集めた区画です。

仕様は、すべてのリンクをnavに入れる必要はないと書いています。

「ページ内のリンクの集まりが、すべてnav要素に入る必要はない。この要素は、主に、主要なナビゲーションのブロックからなる区画のためのものである。」（英語の原文を和訳）

たとえば、フッターに置く利用規約やホームへの短いリンク一覧は、footer要素だけで足りると、仕様は書いています。navを使ってもよいが、たいていは不要だという位置づけです。

aside：本流から切り離せる補足

asideは、周りの内容と薄く関わるだけで、切り離しても読める区画です。印刷物のサイドバーに当たります。

仕様は、使いすぎを戒める一文を添えています。

「aside要素を、かっこ書きの補足のためだけに使うのは適切ではない。それらは文書の本流の一部だからである。」（英語の原文を和訳）

本文の流れの中にある補足は、段落の中に書きます。切り離せる補足だけを、asideにします。

headerとfooter：導入と、区画の終わりの情報

headerは、導入や案内のための部品をまとめる要素です。footerは、直近の区画（なければページ全体）の終わりに置く、著者・関連リンク・著作権などの情報をまとめる要素です。

仕様の例には、articleの中に置いたheaderとfooterが出てきます。区画ごとに、その区画の頭と終わりの情報を持たせられます。

main：ページの中心

mainは、文書の中心となる内容を表します。仕様は、表示されているmainを、1つの文書に1つまでと決めています。

さらに、mainの祖先に置けるのは、html、body、div、名前のないform、独自要素に限られます。W3Cの検査サービスで、sectionの中にmainを入れてみると、エラーが出ました。

要素ごとの早見表

6つの要素を、役割と、読み上げに渡る役割（W3Cの勧告「ARIA in HTML」の対応）で並べます。

要素	表すもの	読み上げに渡る役割
section	見出しを伴う、主題ごとのまとまり	名前があれば区画。無ければ役割なし
article	単独で成り立つ、完結した作品	記事
nav	主要な案内リンクの塊	ナビゲーション
aside	本流から切り離せる補足	補足的な内容
header	導入や案内の部品	article・section・main・nav・asideの外にあるときだけバナー。中では役割なし
footer	区画の終わりの情報	article・section・main・nav・asideの外にあるときだけ、ページ情報。中では役割なし
main	ページの中心の内容	メイン

この表のsection・header・footerの行は、Chromium 145でも測って、同じ結果を得ました。bodyの直下に置いたheaderはバナー、footerはページ情報になりました。articleの中に置いたheaderとfooterは、どちらも役割なしでした。

区切るタグを選ぶ順番を、図にしました。

「sectionタグはいらない」は本当か

検索すると、「sectionタグはいらない」「使わなくても同じ」という声が見つかります。この声を、仕様と計測で確かめます。

仕様上は必須か

必須ではありません。仕様の、section要素の内容モデルは「フローコンテンツ」で、ほかの要素と同じく、使うかどうかは作る人が決めます。

sectionを1つも使わないページも、文法として有効です。h1とh2だけで組んだ小さなページを検査サービスに通すと、指摘は0件でした。

W3Cの検査サービスは、何に警告を出すか

W3Cの検査サービス（Nu Html Checker、バージョン26.11.5）に、書き方を変えた小さなページを通しました。結果は次のとおりです。

書き方	検査サービスの結果
h2の見出しがあるsection	指摘なし
見出しが無いsection	警告
見出しが無いarticle	警告
段落に名前だけ付けて、見出しが無いsection	警告
sectionの中にdiv	指摘なし
divの中にsection	指摘なし
sectionの中にmain	エラー
pの中にsection	エラー

警告の文面は、次のとおりです。

「sectionに見出しがありません。すべてのsectionに、内容を示すh2からh6の見出しを付けるか、見出しが要らない場合はかわりにdiv要素を使うことを検討してください。」（英語の原文を和訳）

警告とエラーの違い

警告は、書き方の提案です。エラーは、仕様に反する書き方の指摘です。

見出しの無いsectionは、エラーにはならず、警告にとどまりました。ブラウザは問題なく表示します。

検査サービスの提案は、仕様の目安と重なっています。sectionを使うなら見出しを置き、置かないならdivにする。どちらの文書も、同じことを求めています。

pの中にsectionを置いた場合は、ブラウザがpを先に閉じる動きをしました。Chromium 145で、pの途中にsectionを書くと、pは「前」の文字だけで閉じ、sectionは外に出ました。検査サービスのエラーは、その結果として余ったpの終了タグに出ています。

「いらない」と言える場面

sectionを使わなくても困らない場面は、確かにあります。

ページが短く、見出し（h2やh3）だけで話題が区切れているなら、sectionで囲む必要は薄いです。見出しが区切りの役目を果たしているからです。

弊社の公開記事は、この作りです。本文は見出しだけで区切っていて、sectionは使っていません。数字は、後の節で示します。

「あると助かる」と言える場面

反対に、sectionに名前を付けて、読み上げソフトの区画にしたいときは、あると助かります。

また、ページの一部を別の場所へ移す、別の画面へ出す、といった再利用を考えるなら、見出しを伴うまとまりを、sectionで囲んでおくと整理しやすくなります。これは弊社の整理です。どちらも、作る側の都合と、読む人の便宜の話です。

見出しとの関係：sectionの中のh1とh2

sectionの中の見出しを、h1から始めるのか、h2から始めるのか。この疑問にも、仕様と計測で答えます。

sectionの中でも、見出しのレベルは変わらない

Chromium 145で、h1を入れ子のsectionとarticleの中に重ねて置き、見出しの大きさとレベルを測りました。

置き場所	文字の大きさ	見出しのレベル
ページ直下のh1	32ピクセル	1
sectionの中のh1	32ピクセル	1
sectionの中のsectionの中のh1	32ピクセル	1
さらにarticleの中のh1	32ピクセル	1

深く入れ子にしても、h1はh1のままです。sectionの深さに応じて、ブラウザが見出しのレベルを自動で下げることはありませんでした。

仕様が求める見出しの順番

見出しのレベルは、要素の名前で決まります。仕様は、見出しの順番に、次の決まりを置いています。

「アウトライン上で、ある見出しの次に来る見出しのレベルは、直前の見出しのレベル以下か、直前より1つだけ大きいものでなければならない。」（英語の原文を和訳）

仕様は、h1のあとにsectionを置き、その中にh3を書く例を、適合しない書き方として示しています。h2に直すと適合します。見出しの順番の詳しい扱いは、見出しタグとは 順番と使い方のルール hタグの警告で何を直すかで扱っています。

見出しのレベルを一括でずらす仕組み

同じ節に、見出しのレベルを一括でずらす属性も書かれていました。この記事を書いた時点の仕様に、headingoffset という属性が定められています。

ただし、ブラウザがこの属性に対応しているかは、確かめていません。使う前に、対応状況を確かめてください。

見出しの付け方の決め方

実務では、ページ全体のh1を1つ置き、sectionの中の見出しはh2から始めるのが、いちばん素直な作りです。

記事の下位に節を重ねるなら、h2の下にh3を置きます。sectionで囲んでいるかどうかにかかわらず、見出しのレベルは、題の上下関係をそのまま表します。

読み上げから見たsection：名前があるときだけ区画になる

見た目に出ないsectionが、見えない場所で働くとすれば、読み上げソフトを使う人に渡る情報です。ここは、W3Cの文書とブラウザの計測の両方で確かめました。

ブラウザで測った結果

Chromium 145で、書き方を変えた3つのsectionと、比較用のdivを用意しました。ブラウザが読み上げソフトに渡す役割を、一覧にします。

書き方	渡された役割
sectionの中にh2。名前の指定なし	区画にならない。見出しだけが渡る
sectionに、見出しを指すaria-labelledbyを付ける	区画。名前は見出しの文字
sectionに、aria-labelで名前を付ける	区画。名前はaria-labelの文字
divに、aria-labelで名前を付ける	区画にならない。名前も渡らない

見出しがあるだけでは、sectionは区画になりませんでした。名前を付けて初めて、読み上げソフトが飛び移れる区画になりました。

W3Cの文書の書き方

W3Cの勧告「ARIA in HTML」（2026年8月11日版）は、section要素の役割を、次のように定めています。

「section要素にアクセシブルな名前がある場合は、role=region。そうでない場合は、role=generic。」（英語の原文を和訳）

genericは、意味を持たない汎用の役割です。計測で「渡る役割なし」と見えたのは、この状態でした。

W3Cの「ARIA Authoring Practices Guide」にも、同じ内容があります。

「section要素は、アクセシブルな名前（aria-labelledby、aria-label、titleなど）を持つとき、regionのランドマークを定義する。」（英語の原文を和訳）

区画は、移動する価値のある塊につける

同じ文書は、区画（region）の位置づけも述べています。

「regionのランドマークは、利用者がそこへ移動できることが十分に重要な内容を含む、知覚できるページの区画である。」（英語の原文を和訳）

つまり、すべてのsectionを区画にする必要はありません。飛び移りたいほど重要な塊だけに、名前を付けます。確かめた範囲では、付ける個数の上限は書かれていませんでした。

名前の付け方

名前の付け方も、同じ文書に書かれています。

場面	付け方
区画が見出しで始まる	見出しにidを付け、sectionにaria-labelledbyでそのidを書く
見出しが無い	sectionにaria-labelで名前を書く
名前の文字	役割の名前を含めない

3つ目には例が添えられています。ナビゲーションの区画に「サイトのナビゲーション」と名前を付けると、読み上げでは「ナビゲーション」が二重に読まれます。名前は、単に「サイト」とするのが望ましいという説明です。

同じ種類の区画が複数あるとき

区画が1ページに複数あるなら、それぞれ別の名前にします。同じ名前の区画が並ぶと、利用者が見分けられません。

navやasideのように、役割が最初から決まっている区画は、1ページに1つだけなら名前を省いてよい場合があると、同じ文書に書かれています。

regionだけは例外です。「regionのランドマークには、ラベルが必須である。」（英語の原文を和訳）と、はっきり書かれています。

WordPressでsectionを出す方法

WordPressで作ったページに、sectionを出せるのか。ブロックエディタの公開ソースコードで確かめました。2026年11月9日に取得した最新版の範囲です。

グループブロックのHTML要素の項目

グループブロックの設定に、HTMLの要素を選ぶ項目があります。候補は、次の7つでした。

選択肢	出力される要素
既定	div
header	header
main	main
section	section
article	article
aside	aside
footer	footer

保存のときは、選んだ名前の要素で、中のブロックを包んで出力する作りでした。つまり、グループブロックでsectionは作れます。

ソースコードを読んだ範囲では、見出しの有無を確かめる処理は見当たりませんでした。見出しブロックを中に入れるのは、作る人の仕事です。

名前を付ける設定

同じグループブロックの設定には、aria-labelに当たる「ariaLabel」の対応が入っていました。この設定を使うと、保存される要素に、aria-labelが付きます。

つまり、sectionを区画にしたいなら、グループブロックで、sectionの選択と名前の指定ができます。編集画面で、この項目がどういう名前で出るかは、確かめていません。

グループブロックのそのほかの使い方は、divタグの使い方 横並びと中央寄せの書き方と意味を持つタグとの使い分けに書きました。

弊社のサイトのテーマが出している枠

弊社のサイトの、2026年11月9日に公開した記事ページを1つ開き、ページ全体の枠を数えました。

要素	個数	備考
header	1	ページ上部
nav	1	全体の案内
main	1	ページの中心
article	1	記事の題と本文を包む
section	2	「この記事を書いた人」と「関連記事」。どちらも見出しを持つ
aside	1	サイドバー
footer	1	ページ下部

このページを、Chromium 145で動かして、ブラウザが渡す役割も確かめました。バナー、ナビゲーション、メイン、記事、補足的な内容、ページ情報が1つずつあり、2つのsectionは区画にはなっていませんでした。名前が付いていないためです。

弊社の公開記事で数えたsection

自社の記事の本文で、sectionがどれだけ使われているかを数えました。

調べ方

弊社の公開記事を、新しい順に50本取得しました。2026年11月5日から8日に公開した記事で、取得は2026年11月9日です。本文のHTMLに含まれる要素の数を、機械で数えました。

数えた結果

要素	個数	使っていた記事の数
section	0	0本
article	0	0本
aside、nav、header、footer、main	各0	各0本
div	150	50本
h2	565	50本
h3	1,312	50本

50本のどの記事にも、sectionはありませんでした。見出しは、1記事あたり、h2が平均11個、h3が平均26個です。

数字の読み取り方

弊社の記事は、本文を見出しだけで区切っています。ページを囲む枠は、テーマが出しています。

本文の中のsectionは、あれば便利という程度のものです。なくても、記事は成り立っています。この数字は、「いらない」という声の、1つの実例です。

ただし、これは弊社の記事の話です。名前を付けた区画が必要な画面では、事情が変わります。

SEOとAI検索では、公式に何と書いてあるか

sectionを使うと、検索順位やAI検索の引用に効くのか。ここまでの内容は、人と読み上げソフトに関する話でした。検索側の話を、公式の文書で確かめます。

Google 検索セントラル「AI機能とウェブサイト」

Googleの検索セントラルに、AIによる概要とAIモードについての案内があります。2025年12月31日更新と表示されていたページです。

「AI による概要や AI モードにコンテンツが表示されるための追加の要件はなく、別途特別な最適化を行う必要もありません。」

同じページに、次の記述もありました。

「AI 機能で表示されるために、新たにコンピュータが解読可能なファイルや AI テキスト ファイル、マークアップを作成する必要はありません。」

このページに、section・article・navなど、HTMLの要素名を挙げた記述は見つかりませんでした。重要なコンテンツをテキスト形式で出す、という項目はありました。sectionの中に書いた文字も、テキストです。

SEOスターターガイド

SEOスターターガイドは、2025年12月18日更新と表示されていました。見出しの順序に触れた箇所に、HTMLの意味づけについての記述があります。

「見出しを意味的な順番にすることは、スクリーン リーダーにとっては素晴らしいことですが、Google 検索にとっては順番どおりに使われていなくても問題ありません。ウェブは一般に正しくない HTML で書かれています。そのため、Google 検索が HTML 規格に潜むセマンティックスの意味に依存することはめったにありません。」

読み上げソフトには良いが、検索は規格の意味にめったに頼らない、という整理です。この文は見出しの順序についての記述ですが、HTMLの意味づけに対するGoogleの見方が読み取れます。

section要素そのものについては、このガイドに記述が見つかりませんでした。

OpenAIとAnthropicの公式文書

OpenAIのクローラーの概要ページと、Anthropicのヘルプにあるクローラーの説明を、2026年11月9日に開きました。

どちらも、クローラーの名前と役割、拒否の仕方が中心でした。sectionなど、HTML要素の使い方を述べた記述は見つかりませんでした。

確かめた範囲を表にする

資料	section・article等についての記述	備考
Google 検索セントラル「AI機能とウェブサイト」	記載なし	追加の要件も、特別な最適化も不要と明記
Google SEOスターターガイド	section自体の記載なし	HTMLの意味に依存することはめったにないと明記
OpenAIのクローラーの概要	記載なし	クローラーの種類と役割が中心
Anthropicのクローラーの説明	記載なし	クローラーの種類と拒否の方法が中心

「記載なし」は、調べて見つからなかったという意味です。効果がないと断定する根拠にはなりません。

公式の記述を、書き方に当てはめる

公式に書かれていない以上、「sectionを入れれば検索やAIに引用される」とは言えません。

検索のために入れるものとして期待するよりも、読み上げを使う人と、あとで直す人のために入れる、と考えるのが、確かめた範囲では無理のない位置づけです。

AIや検索のために手を入れる場所は、ほかにあります。ページの題と見出しの言葉、本文の正確さ、ほかのページとのつながりです。

sectionを置く前の4つの問い

ここまでの内容を、実務で使える4つの問いにまとめます。区切るタグを選ぶときに、順番に確かめます。

問い1：見出しを付けて呼べる塊か

「料金」「事例」のように、題を付けて呼べるなら、sectionの候補です。呼べないなら、divにするか、囲まずに書きます。

問い2：単独で配っても意味が通るか

その塊だけを切り出して、ほかの場所に載せても意味が通るなら、articleにします。通らないなら、sectionのままにします。

問い3：案内や補足など、ほかの要素に合うか

主要な案内リンクの塊ならnav、本流から切り離せる補足ならaside、ページの中心ならmainです。合う要素があれば、先にそちらを選びます。

問い4：読み上げの区画にしたいか

飛び移れる区画にしたい塊なら、sectionに名前を付けます。見出しがあれば、aria-labelledbyで指します。

4つの問いの判定表

問い	はいのとき	いいえのとき
見出しを付けて呼べる塊か	次の問いへ	divにする、または囲まない
単独で配っても意味が通るか	articleにする	sectionのままにする
nav・aside・mainなどに合うか	その要素にする	sectionのままにする
読み上げの区画にしたいか	名前を付ける	名前は付けない

書き直しの例

料金ページを例に、書き直しを示します。

直す前は、「料金」「支払い方法」「よくある質問」の3つの塊を、すべてdivで囲み、見出しはh2で付けてあります。

直した後は、題を付けて呼べるこの3つの塊を、sectionで囲みます。見た目の余白や幅を整える外枠は、そのままdivを残します。

読み上げで飛び移れるようにしたい「よくある質問」だけには、見出しのidを使って、名前を付けます。ほかの2つは名前を付けず、通常の塊のままにします。

チームで決めておくとよいこと

制作会社や社内の担当者と、決めておくとよいことがあります。

決めること	決め方の例
sectionを使う基準	見出しを付けて呼べる塊にだけ使う
見出しの扱い	sectionには必ず見出しを置く
名前を付ける塊	読み上げで飛び移ってほしい塊だけに付ける
名前の文字	見出しの文字をそのまま使う。役割名は含めない
点検の方法	W3Cの検査サービスに通し、見出しの無いsectionの警告を0件にする

よくある質問

Q1. sectionタグとは何ですか

見出しを伴う、主題ごとの内容のまとまりを表す要素です。章や節に当たる区切りに使います。

画面の見た目は変わりません。意味は、ソースと読み上げに現れます。

Q2. sectionタグとdivタグの違いは何ですか

目次に載る題を持つ塊かどうかです。題を持つならsection、見た目を整えるだけならdivです。

divの詳しい使い方は、divタグの使い方 横並びと中央寄せの書き方と意味を持つタグとの使い分けで扱っています。

Q3. articleタグとsectionタグは、どう使い分けますか

単独で配っても意味が通るならarticle、何かの一部ならsectionです。

仕様は、迷う場合があることを認めていて、判断は「作者の意図による」と書いています。置かれ方で、同じ内容の答えが変わります。

Q4. sectionタグはいらないのですか

仕様上は必須ではありません。使わなくても、表示は崩れず、検査サービスもエラーを出しません。

ただし、読み上げソフトの区画にしたいときは、名前を付けたsectionが役に立ちます。見出しの付け方は、見出しタグとは 順番と使い方のルール hタグの警告で何を直すかで扱っています。

Q5. sectionタグを使うと、SEOやAI検索に有利になりますか

公式の文書に、記載が見つかりませんでした。

Googleは、AI機能のために特別な最適化は不要と書いています。HTMLの意味づけ全般についても、検索がそれに頼ることはめったにないと書いています。

まとめ：区切りのタグは、置く前に4つ問う

section要素は、見出しを伴う、主題ごとの内容のまとまりを表します。見た目の箱が欲しいだけなら、divを使います。

単独で成り立つ内容はarticleです。案内ならnav、補足ならaside、ページの中心ならmainを先に考えます。

「いらない」という声は、半分だけ当たっています。仕様は必須にしておらず、使わなくても検査は通ります。一方で、見出しの無いsectionには、検査サービスが警告を出します。

名前を付けたsectionは、読み上げソフトの区画になります。見出しだけでは、区画になりませんでした。

弊社の記事では、50本のどれにも、本文にsectionがありませんでした。見出しだけで区切っていても、記事は成り立っています。

検索やAI検索への効果は、公式の文書に記載が見つかりませんでした。迷ったときは、4つの問いで決めます。

周辺の話は、セマンティックSEOとは何か AI検索の時代に中小企業がサイトで直す場所で扱っています。段落の区切り方はpタグとは brタグやdivタグとの違いと段落の区切り方の決め方、並びのタグの選び方はulタグとは liタグとの関係と意味 olやdlとの使い分けの決め方に書きました。

今日できる点検

点検すること	確かめ方	直し方
見出しの無いsectionがないか	W3Cの検査サービスに通し、警告を探す	見出しを足す。足せなければdivに変える
すべてのdivをsectionに置き換えていないか	ソースで、題の無いsectionを探す	題の無い塊は、divに戻す
単独で配れる内容を、sectionで包んでいないか	お知らせや事例の1件ごとの囲みを見る	articleに変える
名前を付けたsectionが複数ないか	ソースで、aria-labelとaria-labelledbyを探す	同じ名前を避け、移動したい塊だけに残す
ページの枠に、mainがあるか	ソースで、mainの数を数える	表示されるmainを、1つだけにする
WordPressのグループブロックの要素を確認したか	ブロックの設定で、HTMLの要素の項目を見る	役割に合う要素を選ぶ

ページを増やしても問い合わせが来ないなら、原因はページの外にあります。その場合は、下の入口からご相談ください。