sectionとarticleの違いは？使い分けと入れ子の考え方を解説

「sectionとarticle、結局どっちを使えばいいの？」と手が止まること、ありますよね。

結論から言うと、迷う原因は見た目ではなく内容が独立して読めるかで判断する点にあります。articleは単体で成り立つ内容、sectionは話題ごとの区切りとして考えると整理しやすいです。

この記事では、sectionとarticleの違い、使い分けの基準、入れ子にするときの考え方まで順番に確認できます。

まずは、それぞれのタグがHTML5でどう定義されているのかから見ていきましょう。

そもそも「section」と「article」とは？それぞれの基本的な定義

コードを書いていると、見た目は同じ箱なのに、なぜわざわざタグを分けるのか迷いますよね。

ここで先に答えを言うと、sectionは「話題ごとの区切り」、articleは「単体で成立する内容」と考えると整理しやすいです。

どちらもHTML5で用意された意味のある要素ですが、役割は同じではありません。

この違いを最初に押さえておくと、あとで親子関係や使い分けを学ぶときに一気に楽になります。

section（セクション）タグが表す意味と役割

sectionタグは、文書やページの中にあるひとまとまりの主題を区切るための要素です。

たとえば「サービス紹介」「よくある質問」「会社情報」のように、ページ内で話題が切り替わる場面に向いています。

大事なのは、section自体が必ずしも単独で完結した読み物である必要はないことです。

あくまでページ全体の中にある一区画で、その区画には固有のテーマがある、という状態に合います。

そのため、sectionを使う場面では見出しと一緒に考えるのが基本です。

見出しが付いた瞬間に「ここからは別の話題です」と機械にも人にも伝えやすくなるからです。

逆に、単に余白を付けたい、横並びにしたいといった見た目だけの都合なら、sectionではなくdivのほうが自然なこともあります。

独学のときは箱っぽく見える要素を全部sectionにしたくなるのですが、そこをこらえるだけで文書構造がかなりきれいになります。

article（アーティクル）タグが表す意味と役割

articleタグは、その部分だけ取り出しても内容として成立しやすいものに使います。

代表例はブログ記事、ニュース記事、掲示板の投稿、レビュー、コメント1件などです。

ページから切り離されても、ひとつの読み物や投稿として意味が通るなら、articleの候補になります。

WHATWGの考え方でも、articleは再配布や再利用、一覧表示されたときの一単位として扱いやすい内容を想定しています。

たとえばブログのトップページに10件の記事が並ぶなら、1件ずつがarticleになりやすいです。

記事詳細ページでも、本文全体は1つのarticleとして扱うことが多いでしょう。

sectionとの違いがわかりにくいのは、articleも中で話題を分けられるからです。

ただ、その場合でも中心にあるのは「独立した1本の記事」という性格で、そこがsectionとの分かれ目です。

HTML5がこれらを定義している理由とセマンティックWeb

HTML5がsectionやarticleを用意したのは、ページをただ表示する箱の集まりではなく、意味のある文書として記述できるようにするためです。

昔はdivを重ねても画面表示は作れましたが、それだけだと検索エンジンや読み上げソフト、開発者に「この部分が何なのか」が伝わりにくい場面がありました。

そこで、記事なのか、話題の区切りなのか、案内なのかをHTML側で明示する流れが強まりました。

これがセマンティックWeb、つまり意味を持った構造化の考え方です。

難しく見えますが、やっていることはシンプルで、見た目ではなく中身に合わせて要素を選ぶだけです。

たとえば同じ四角いブロックでも、最新記事1件ならarticle、記事内の「注意点」章ならsection、と意味で選びます。

ブラウザの見た目はほぼ変わらなくても、HTMLの読み解かれ方は変わります。

検索順位がタグ1つで急に上がる、そんな単純な話ではありません。

ただ、見出し構造や内容のまとまりが素直に伝わる書き方は、保守のしやすさや読み上げの分かりやすさにつながります。

制作現場でも、数か月後に自分でコードを見返したとき、divだらけのページより「あ、ここは記事本体、ここはページ内の章だ」と一目で読めるほうがかなり助かります。

まずはsectionは主題ごとの区切り、articleは独立した内容という基本だけ覚えれば十分です。

どちらを使う？sectionとarticleの明確な違いと使い分けの基準

コードを書いていると、sectionとarticleは見た目が同じなので、どちらでもよさそうに感じますよね。

でも、ここで迷わなくなると、HTMLの骨組みがかなり整います。

先に答えを言うと、判断の軸は「その内容が単体で読まれて成立するか」です。

この基準さえ持っておけば、親子関係まで自然に決めやすくなります。

使い分けを判断する「自己完結性（独立性）」の有無

articleを使うのは、その部分だけ切り出しても1つの読み物や投稿として成り立つときです。

反対にsectionは、ページや記事の中を意味ごとに区切るためのまとまりに向いています。

迷ったら、「この部分だけ別ページにしても違和感がないか」を自分に聞くと判断しやすいですよ。

たとえばブログの本文、ニュース1本、掲示板の投稿1件のように、それ単体でタイトルや内容が完結しているならarticleが候補になります。

一方で、「会社概要」「よくある質問」「料金表」のように、ページ全体の中の1区画として存在しているものはsectionで整理することが多いです。

感覚で分けようとすると毎回ぶれますが、独立性で見るとかなり安定します。

制作現場では、一覧カードを全部sectionにしてしまう人もいますが、記事一覧の1件1件は独立して読めるため、実際にはarticleのほうが自然な場面が多めです。

逆に、本文中の「導入」「結論」まで全部articleにすると、独立した投稿がページ内に何個もあるような構造になって、少し不自然なんです。

つまり、「ページの区切り」ならsection、「1本の作品・投稿」ならarticleと覚えると、かなり迷いにくくなります。

「article」の中に「section」を入れるパターン

いちばんよくあるのは、1本の記事をarticleで囲い、その中の章ごとにsectionで分ける形です。

これはブログ記事詳細ページで特によく使います。

記事全体は独立した投稿ですが、その中の「概要」「手順」「注意点」は単体で投稿として完結していないからです。

たとえば次のような構造です。

• 記事全体：article
• 記事内の各章：section

この形にすると、HTMLの意味がすっきりしますし、見出しの階層も整理しやすくなります。

本文の流れに合わせて章を区切るだけなので、初心者さんでも実装しやすい組み方です。

articleの中に複数のsectionがあるのは自然ですし、むしろ標準的な使い方と考えて大丈夫。

ひとつ注意したいのは、区切る理由が見た目だけになっていないかです。

余白をつけたい、背景色を変えたい、そのためだけならdivで十分なこともあります。

意味のまとまりとして章が存在するときに、sectionを使うのがきれいです。

「section」の中に「article」を入れるパターン

sectionの中にarticleを入れる形も、実務ではかなりよく出てきます。

これは「1つのテーマを持つエリアの中に、独立した投稿が複数並ぶ」ときにぴったりです。

たとえば「新着記事」という区画全体はsection、その中の各記事カードはそれぞれarticleにできます。

親がテーマのまとまり、子が独立した内容、という関係ですね。

• 新着記事エリア全体：section
• 記事カード1件ずつ：article

この組み方が向く場面は、ブログのトップページ、関連記事一覧、お知らせ一覧などです。

一覧全体には共通の見出しがあり、その中に1件ずつ読める情報が並んでいます。

ここを全部sectionにすると、一覧の中の1件1件が「区切り」なのか「独立した記事」なのか曖昧になります。

反対に一覧全体までarticleにすると、何がひとまとまりなのか少し読み取りづらくなります。

迷ったら、次の順番で考えると決めやすいです。

1. まず外側に共通テーマのまとまりがあるか確認する
2. その内側の各要素が単体で成立するか見る
3. 成立するなら内側をarticleにする

この順番で見ると、親子関係を感覚で決めずに済みます。

わたしなら、一覧ページで5件以上のカードが並ぶときは、1件ごとの独立性を先にチェックします。

そこでタイトル、本文抜粋、公開日、詳細へのリンクがそろっていれば、articleに寄せる判断がしやすいです。

結局のところ、外側と内側のどちらが主題のまとまりで、どちらが単体で完結する内容なのか――そこが見えれば、sectionとarticleの使い分けはかなりクリアになります。

Webサイトの制作現場でよくある！具体的なマークアップ実例

タグの説明を読んだあとに本当に知りたいのは、たぶん「で、私のページではどっちを書くの？」というところですよね。

ここでは制作現場で出やすい3パターンにしぼって、独立して読める内容はarticle、ページ内のひと区切りはsectionという感覚が自然に身につく形で見ていきます。

ブログの記事ページ（本文・見出し・コメント欄）での実例

記事詳細ページでは、中心になる1本の記事そのものがarticleです。

その理由は、その記事だけ切り出しても内容が成立するからです。

一方で、本文中の「概要」「手順」「注意点」のような章立ては、記事の内部を分けるための区切りなのでsectionが合います。

コメント欄は少し迷いやすいところですが、通常は記事に付属する領域なので、親となるarticleの中にsectionで置く形がわかりやすいです。

実務では、コメント1件ずつをarticleにする設計もあります。

ただし、コメント単体を一覧や外部配信で独立して扱わないなら、無理にarticleを増やさなくても困りません。

こんな構成にすると整理しやすいです。

• <article> 記事全体
• <section> 導入や本文の各章
• <section> コメント欄

初心者の方は、本文の各見出しごとに全部articleを書きたくなりがちです。

でも、章だけ切り出しても1本の作品としては読みにくいならsectionで十分。ここを押さえると手が止まりにくくなります。

ブログのトップページ（新着記事一覧リスト）での実例

新着記事一覧では、一覧全体をsection、その中の各記事カードをarticleにする形がよく使われます。

一覧全体は「新着記事」という1つの区画で、各記事カードはそれぞれ独立した読み物への入口だからです。

たとえば、トップページに「新着記事」「人気記事」「お知らせ」が並ぶなら、各ブロックはsectionで分けると構造が素直になります。

そして「新着記事」ブロックの中に複数のarticleを置くわけです。

この形は、あとから件数を増減したり、関連記事欄へ使い回したりするときも崩れにくいです。

私なら、カード1枚にタイトル・要約・公開日・サムネイルが入っていて、その1枚だけでも何の記事か判断できるならarticleにします。

逆に、単なるリンクの羅列ならliとaだけで十分なこともあります。

• 新着記事ブロック全体：section
• 記事カード1件ごと：article
• 単純なリンク列：li中心でも可

ここでのコツは、見た目ではなく情報のまとまりで決めることです。

カードの枠線があるからarticle、という決め方をすると後で迷います。

企業のコーポレートサイトやLP（ランディングページ）での実例

企業サイトやLPでは、sectionの出番がかなり多くなります。

ファーストビュー、サービス紹介、導入事例、よくある質問、お問い合わせ案内といった各区画は、ページ内の役割ごとに分かれているからです。

この場合、ページ全体を1本のarticleにする必要はあまりありません。

LPは1ページで完結していても、ページを丸ごと1記事として再配布する場面が少ないため、独立性より区画整理の意味が強いことが多いからです。

ただし、導入事例やお客様の声を1件ずつ掲載する部分はarticleが合います。

1件ごとの事例が、それだけで読める内容になっているためです。

コーポレートサイトでも同じで、「お知らせ一覧」はsection、その中のニュース1件ごとはarticleにすると収まりがいいです。

LPで全部section、ブログで全部article、という固定化は避けたいところです。

大事なのはサイト種別ではなく、その塊が独立した内容として成立するかどうかです。

迷ったら、外部の一覧にその部分だけ載せても意味が通るかを考えてみてください。

通るならarticleの候補、通らないならsectionの可能性が高いです。

間違えやすいポイントとマークアップ時の注意点

実際のコーディングでは、sectionとarticleの定義そのものより、「どんな場面で使ってはいけないか」のほうが迷いやすいです。

見た目が同じなので雑に置いても画面は崩れませんが、あとでHTMLを読み返したときに意味が追えなくなり、修正のたびに手が止まりがちなんですよね。

ここでは、独学の人が引っかかりやすい3つの注意点にしぼって、判断しやすい形で整理していきます。

sectionタグを使うときは「見出し（h1〜h6）」を必ずセットにする

sectionを使うなら、その区切りに何の意味があるのかを示すために、見出しを置くのが基本です。

理由はシンプルで、sectionは「内容のひとかたまり」を表す要素だからです。

ひとかたまりなら、当然「このまとまりは何なのか」が分からないと困ります。

たとえば記事詳細ページで、本文の下に「関連記事」「著者情報」「よくある質問」という3つのブロックがあるなら、それぞれに見出しがある状態でsectionにすると意味が通ります。

逆に、見出しがなく、ただ余白をつけたいから囲っただけなら、sectionよりdivのほうが自然です。

見出しのないsectionは、意味の区切りなのか装飾用の箱なのかが曖昧になりやすいので注意したいところ。

なお、視覚的に見出しを出したくない場合でも、文書構造として必要なら見出し自体は置いて、CSSで調整する手があります。

迷ったら、「この部分に見出しを付けるなら何と書くか」を先に考えると判断しやすいです。

レイアウト目的（CSS装飾）だけで使わない！divタグとの違い

sectionもarticleも、余白・背景色・横並びのための箱ではありません。

その役目だけなら、基本はdivを使います。

ブラウザ表示だけ見るとどれで囲っても大差ないため、最初のうちは全部sectionで済ませたくなります。

でも、HTMLは見た目のためだけにあるわけではなく、文書として何を表しているかも大切です。

たとえば、3カラムの横並びを作る親要素はdivで十分なことが多いです。

その中に「お知らせ」「導入事例」「採用情報」といった見出し付きの塊があるなら、各ブロックをsectionにする余地があります。

先に見た目で要素を選ぶと崩れやすく、先に意味で選ぶと保守しやすい。制作現場ではこの差がじわじわ効いてきます。

「とりあえず全部article」や「すべてsection」にするのは避ける

使い分けに迷うと、統一したほうが楽に感じます。

ただ、全部をarticleか全部をsectionに寄せると、かえって文書構造が読みにくくなります。

articleは、単体で切り出しても内容として成立するもの向きです。

ブログ一覧の各記事カード、ニュース1件、レビュー投稿1件などが典型ですね。

一方で、ページ内の「会社概要」「料金表」「お問い合わせ前の注意」のような区切りは、独立した記事というよりページ内の章に近いので、sectionが合いやすいです。

こんなふうに考えると、判断がかなり安定します。

• 単体で再配布・再掲しても成立するならarticle
• ページ内の話題を整理する区切りならsection
• 意味を持たず、見た目や制御のための囲みならdiv

もし5秒考えても決めきれないなら、まずdivで置いておき、見出しや独立性が後から明確になった時点で置き換える方法もあります。

無理にセマンティック要素を増やすより、そのほうが自然なHTMLになることは少なくありません。

私なら、説明できないarticleは置かないですし、見出し名が出てこないsectionもいったん止めます。

大事なのはタグ名を覚えることではなく、そのブロックがページの中で何者なのかを言葉で説明できることです。

そこがはっきりすれば、sectionとarticleの選択で迷う場面はかなり減ります。

気になる疑問を解決！SEOや実装に関するよくある質問

ここは、手を動かし始めたときに急に気になりやすい部分です。

sectionとarticleの違いは理解できても、「SEOに響くの？」「迷ったらどっち？」「入れ子はどこまでOK？」で止まりやすいんですよね。

先に答えを言うと、順位を左右するのはタグ名そのものより、内容の意味づけが自然で、見出し構造が崩れていないことです。

その前提を押さえたうえで、実装の現場で迷いやすい3つの疑問を順番に整理していきます。

使い分けを間違えると検索順位（SEO）に悪影響があるの？

いきなり大きく順位が落ちる、というほどの直接的な悪影響は一般的には考えにくいです。

検索エンジンは、sectionかarticleかの1点だけで評価を決めているわけではありません。

見るべきなのは、ページ全体の構造が自然かどうかです。

たとえば、独立した記事なのに全部sectionで囲っていたり、逆に見出しごとの単なる区切りまで全部articleにしていたりすると、文書の意味がぼやけます。

その結果、検索エンジンというより、支援技術や保守する人にとって読みにくいHTMLになりやすいんです。

影響が出るとしたら、次のような遠回りの形が多いでしょう。

• 見出し構造が崩れて、ページの主題が伝わりにくくなる
• 本文と関連記事、コメント欄などの境界があいまいになる
• 後から修正する人が意図を読み取りづらくなり、内部構造がさらに乱れる

つまり、タグの使い分けミスが即失点になるというより、意味の通らないマークアップが積み重なることが問題なんですね。

実務では、表示が同じなので後回しにされがちです。

でも、見出し・本文・補足情報の役割がきれいに分かれているページは、後で触ったときの修正時間がかなり短くなります。

1ページでは差が見えにくくても、記事が50本、100本と増えるとこの差は重いです。

もし迷って区別がつかないときはどうすればいい？

迷ったら、「その部分だけ切り出しても1つの読み物として成立するか」で判断すると失敗しにくいです。

これがYesならarticle、Noならsectionをまず疑う、という順番で考えると整理しやすくなります。

判断に迷う場面は、見た目ではなく中身の役割が曖昧なときです。

そこで、実装前に次の3問を自分に投げるとかなり決めやすくなります。

それでも迷うなら、無理に意味の強いタグを選ばず、まずはdivで保留でも大丈夫です。

意味を持たせる自信がないのに、なんとなくarticleやsectionを置くほうが危険です。

あと、ひとつ現実的なコツがあります。

コードレビューで説明できるかを基準にする方法です。

「これは独立した記事だからarticle」「これは記事内のFAQ区画だからsection」と1文で言えれば、その選び方はたいてい妥当です。

逆に、理由が「なんとなくそれっぽい」しか出てこないときは、選び直したほうが安心です。

sectionの中にsectionを入れ子にするのは問題ない？

問題ありません。

HTML5では、内容のまとまりが階層的になるなら、sectionの中にsectionを入れる書き方は自然です。

ただし、入れ子にできるからといって深くしすぎるのは別の話です。

2階層くらいならよくありますが、3階層、4階層と続くと、読む側も作る側も構造を追いにくくなります。

特にありがちなのが、「大見出しの区画」「その中の説明区画」「その中の補足区画」を全部sectionで包んでしまう書き方です。

この場合、本当にそれぞれが見出し付きの独立した区画なのかを見直したほうがいいでしょう。

目安としては次の通りです。

• 各sectionに、その区画を説明する見出しがある
• 親と子で役割が分かれている
• 入れ子を外しても意味が崩れないなら、深くしすぎていない

反対に、見出しもなく、CSSを当てるためだけにsectionを重ねるのは避けたいところです。

入れ子そのものはOKでも、見出しのない区画を量産すると意味づけが急に弱くなります。

迷ったときは、ブラウザ表示ではなく、見出しだけを一覧で眺めるつもりで考えると判断しやすいです。

親の見出しと子の見出しを抜き出したとき、章と節の関係として自然なら、その入れ子はかなり健全です。

逆に、見出し一覧がごちゃついて読みにくいなら、タグの階層も詰め込みすぎの可能性があります。

sectionとarticleの違いまとめ

sectionとarticleの違いは、まずその内容が独立した読み物として成立するかで考えると、かなり判断しやすくなります。

articleは単体でも意味が通る内容に、sectionはテーマごとに区切るまとまりに使う――この感覚を持てば、入れ子の形や使い分けも自然に決めやすいでしょう。

見出しを添えること、見た目調整のためだけに使わないこと、迷ったら無理に意味づけしないこと。この3つを意識するだけでも、HTMLの質はしっかり整います。

次にコードを書くときは、まず「これはひとつの記事か」「それとも内容を分ける区画か」を1つずつ確認してみてください。小さな判断を丁寧に積み重ねるほど、読み手にも検索エンジンにも伝わりやすい文書になります。手元のブログや制作中のページを見直しながら、1か所だけでも書き換えて試す。その一歩で、使い分けはちゃんと身についていきます。