HTMLのarticleタグとsection・mainの関係、違い、入れ子（ネスト）の考え方を解説

「articleタグと sectionタグは、どう使い分ければいいんだろう？」
「main の中に article を入れているけど、article の中に main を入れてもいいの？」
「article の中に、さらに article を入れてもいいの？」

HTML を学んでいると、タグそのものの意味だけでなく、「どのタグをどのタグの中に配置するのか」で迷うことがあります。
特に article は、main や section と組み合わせたり、場合によっては article の中に別の article を配置したりするため、入れ子（ネスト）の考え方を理解しておくことが大切です。

main はページの主要な内容、article はそれだけを取り出しても成立する独立したコンテンツ、section は内容をテーマごとに分けたまとまりを表します。
それぞれの役割を理解すると、どのタグを親・子として配置すればよいのか判断しやすくなります。

ここは、article と main・section の違いや関係を整理しながら、article の中に section を入れるケース、section の中に article を入れるケース、さらに article の中に別の article を入れるケースについて解説します。

コメントや関連記事など、実際の Webページで使われる HTML構造も紹介しながら、「なぜこのタグを入れ子にするのか」「どこまで article を使ってよいのか」を一つずつ確認していきましょう。

mainタグとarticleタグの関係
sectionタグとarticleタグの配置場所・入れ子の関係
articleタグを入れ子にするケース
articleタグを使ったHTML構造例
1. 記事一覧ページ
2. 関連記事があるページ

mainタグとarticleタグの関係

main と article は、どちらも Webページの内容を表すために使われますが、表しているものは同じではありません。
main は、そのページで中心となる主要な内容を表します。

一方、article は、その部分だけを取り出しても、一つの独立したコンテンツとして成立する内容を表します。

この違いを理解すると、main と article をどのように配置すればよいのかが分かりやすくなります。

mainはページの「主要な内容」を表す

Webページには、ヘッダーやナビゲーション、フッターなど、さまざまな部分があります。
その中でも、そのページで特に中心となる内容をまとめるのが main です。

たとえばブログ記事のページであれば、ページの中心となるのは「ブログ記事そのもの」です。

そのため、次のような構造にできます。

<main>
  <article>
    <h1>HTMLのarticleタグの使い方</h1>
    <p>articleタグについて詳しく解説します。</p>
  </article>
</main>

この場合、main は「このページの主要な内容」を表し、その中にある article は「一つの独立した記事」を表しています。

イメージすると、次のような関係です。

main
└─ article
     ├─ 記事タイトル
     └─ 記事本文

このように、ページの主要な内容が一つの記事である場合は、main の中に article を配置するという構造が考えられます。

mainの中に複数のarticleを配置することもある

main の中に入る article は、必ず1つとは限りません。

たとえば、ニュース一覧ページを考えてみます。
ページの中心となるのはニュース一覧なので、その部分を main で囲みます。
そして、それぞれのニュースを独立したコンテンツとして article で表すことができます。

<main>
  <h1>ニュース一覧</h1>

  <article>
    <h2>新しいサービスが開始されました</h2>
    <p>サービスに関するニュースです。</p>
  </article>

  <article>
    <h2>新機能が追加されました</h2>
    <p>新機能に関するニュースです。</p>
  </article>

  <article>
    <h2>イベントが開催されます</h2>
    <p>イベントに関するニュースです。</p>
  </article>
</main>

この場合は、

main
├─ article（ニュース1）
├─ article（ニュース2）
└─ article（ニュース3）

という構造です。

main が「ニュース一覧というページの主要部分」を表し、その中のそれぞれの article が「独立したニュース」を表しています。

このように、main と article は「1対1」で使うとは限りません。
一つの記事を main の中に入れることもあれば、複数の記事を main の中に並べることもあります。

articleは必ずmainの中に入るわけではない

ここは特に注意したいポイントです。

これまでの例では main の中に article を配置してきましたが、article は必ず main の中に入れなければならないわけではありません。
なぜなら、article が表しているのは「main の中にあるもの」ではなく、独立したコンテンツだからです。

ページの構造によっては、main とは別の場所に article を配置することもあります。
たとえば、次のような構造です。

<header>
  <h1>Webサイト</h1>
</header>

<main>
  <h2>メインコンテンツ</h2>
  <p>このページの主要な内容です。</p>
</main>

<article>
  <h2>お知らせ</h2>
  <p>サイトに関する独立したお知らせです。</p>
</article>

この例では、article は main の外にあります。
つまり、

body
├─ header
├─ main
│   └─ メインコンテンツ
└─ article
     └─ お知らせ

という構造です。

ここで重要なのは、article をどこに置くかを「main の中か外か」だけで決めるのではないということです。

「このコンテンツは、このページの主要な内容に含まれているのか？」
「それとも、主要な内容とは別の独立したコンテンツなのか？」
というように、それぞれの役割を考えて配置します。

articleの中にはほかの要素を入れられる

article は、単に文章を入れるためだけの箱ではありません。
一つの独立したコンテンツを表すため、その中に見出しや段落、画像、section など、そのコンテンツを構成するための要素を入れることができます。

たとえばブログ記事なら、次のような構造にできます。

<main>
  <article>
    <h1>HTMLのarticleタグの使い方</h1>
    <p>articleタグについて解説します。</p>

    <section>
      <h2>articleタグとは？</h2>
      <p>独立したコンテンツを表すタグです。</p>
    </section>

    <section>
      <h2>articleタグの配置場所</h2>
      <p>ページの構造に合わせて配置します。</p>
    </section>
  </article>
</main>

この場合は、

main
└─ article
     ├─ 記事タイトル
     ├─ 記事本文
     ├─ section
     └─ section

という構造になっています。

ここからも分かるように、HTML では「どのタグがどのタグの中に入るか」だけを見るのではなく、それぞれの要素が何を表しているのかを考えながら構造を作ることが大切です。

mainとarticleの関係を整理しよう

ここまでの内容を整理すると、main と article は次のように考えると分かりやすくなります。

タグ	表すもの
main	そのページの主要な内容
article	独立したコンテンツ

そのため、
・ページの主要な内容が独立した記事なら、main の中に article を配置する。
・ニュース一覧のように複数の独立したコンテンツがあるなら、main の中に複数の article を配置する。
・独立したコンテンツがページの主要部分とは別に存在するなら、main の外に article を配置することもある。
というように考えます。

逆に、article の中に main を入れるという考え方ではありません。

つまり、main と article を使うときに大切なのは、「どちらを親にするか」を丸暗記することではなく、「その部分はページの主要な内容なのか、それとも独立したコンテンツなのか」を判断することです。

この考え方が分かれば、次に出てくる section と article の違いも理解しやすくなります。

【注意】articleの中にmainを入れるのはNG

ここは、main と article の関係を理解するうえで、特に注意しておきたいポイントです。

結論からいうと、 article の中に main を入れることはできません。
HTML のルール上、main は article の子孫要素にしてはいけません。

たとえば、次のような構造は正しい HTML ではありません。

<article>
  <main>
    <h1>記事タイトル</h1>
    <p>記事本文</p>
  </main>
</article>

「表示自体はされるから問題ないのでは？」と思うかもしれません。

しかし、ブラウザに表示できることと、HTML として正しい構造であることは別の話です。

HTML には、それぞれの要素について「どのような場所に配置できるか」というルールがあります。
main についても例外ではありません。

実際に、Web技術のドキュメントとして広く利用されている MDN（Mozilla Developer Network）では、main の配置について、article、aside、footer、header、nav などの要素の子孫にしてはいけないとされています。

MDN は、Webブラウザーの Firefox を開発する Mozilla が運営している、HTML・CSS・JavaScript などの Web技術について調べられるドキュメントサイトです。
HTML のタグの使い方や、どのような構造が認められているのかを確認したいときにも利用できます。

そのため、main と article の入れ子を考えるときは、

<main>
  <article>
    ...
  </article>
</main>

という構造はできますが、

<article>
  <main>
    ...
  </main>
</article>

という構造にはしない、と覚えておきましょう。

ただし、ここで「では article は必ず main の中に入れるのか？」と考えるのも間違いです。

article は独立したコンテンツを表すための要素なので、ページの構造によっては main の外に配置することもあります。

つまり、main と article の関係は、
「main の中に article を入れることがある」
のであって、
「article は必ず main の中に入れる」
というルールではありません。

大切なのは、タグの親子関係を丸暗記することではなく、それぞれの役割を理解することです。

・main：そのページの主要な内容を表す
・article：それだけを取り出しても成立する独立したコンテンツを表す

この役割をもとにページの構造を考えれば、「どこに article を配置するのか」も判断しやすくなります。

なお、article の中に section を入れたり、article の中に関連する別の article を入れたりすることはできます。
たとえば、ブログ記事の中にコメントを article として入れるような構造も HTML では想定されています。

このように、「入れ子にできるかどうか」はタグによって異なります。次の「sectionタグとarticleタグの配置場所・入れ子の関係」では、article の中で section をどのように使い分けるのかを見ていきましょう。

sectionタグとarticleタグの配置場所・入れ子の関係

article と section は、どちらも HTML の中で内容をひとまとまりにするために使われます。

そのため、HTML を学び始めたばかりだと、
「どちらも内容を囲むタグだけど、何が違うの？」
と迷いやすいでしょう。

まずは、それぞれの役割を簡単に整理してみます。

sectionとarticleの関係

article は、その部分だけを取り出しても、一つの独立したコンテンツとして成立するものを表します。

ブログ記事やニュース記事、商品情報などが代表的な例です。

一方、section は、ページやコンテンツの中で、同じテーマの内容をひとまとまりにするために使います。

たとえば、一つのブログ記事の中に「articleタグとは？」「articleタグの使い方」「articleタグの注意点」という内容があるとします。

記事全体は article で表し、その中のテーマごとのまとまりを section で分けることができます。

<article>
  <h1>HTMLのarticleタグの使い方</h1>

  <section>
    <h2>articleタグとは？</h2>
    <p>articleタグの役割について説明します。</p>
  </section>

  <section>
    <h2>articleタグの使い方</h2>
    <p>articleタグの使い方について説明します。</p>
  </section>

  <section>
    <h2>articleタグの注意点</h2>
    <p>articleタグを使うときの注意点を説明します。</p>
  </section>
</article>

この場合は、

article
├─ section
├─ section
└─ section

という関係です。

article が一つの独立した記事を表し、その記事の中を section でテーマごとに区切っています。

articleとsectionは入れ子にできる

ここで覚えておきたいのが、article と section は、単純に「どちらが上」という関係ではないということです。

先ほどのように、

<article>
  <section>
    ...
  </section>
</article>

という構造にすることもできます。

一方で、内容によっては section の中に article を配置することもあります。

<section>
  <h2>おすすめの記事</h2>

  <article>
    <h3>HTMLのarticleタグとは？</h3>
    <p>articleタグについて解説します。</p>
  </article>

  <article>
    <h3>HTMLのsectionタグとは？</h3>
    <p>sectionタグについて解説します。</p>
  </article>
</section>

この場合は、

section
├─ article
└─ article

という関係です。

「おすすめの記事」という一つのテーマのまとまりが section で、その中に、それぞれ独立した記事である article が入っています。

つまり、article と section の関係は、

article
└─ section

だけではありません。

section
└─ article

という構造も考えられます。

大切なのは、どちらを親にするかを決めてから内容を当てはめるのではなく、それぞれの役割に合わせて HTML の構造を考えることです。

articleとsectionをどう使い分ける？

迷ったときは、次のように考えてください。
「この部分だけを取り出しても、一つのコンテンツとして成立する？」

そう考えられるなら、article が候補になります。

一方、
「これは、ページや記事の中にあるひとつのテーマのまとまり？」
と考えられるなら、 section が候補になります。

たとえば、ブログ記事そのものは独立したコンテンツなので article、その記事の中にある「使い方」「注意点」「まとめ」などは、テーマごとのまとまりとして section を使う、と考えると分かりやすいでしょう。

ただし、これは「大きい内容なら article、小さい内容なら section」という意味ではありません。
article と section を使い分けるときに大切なのは、大きさではなく、その内容がどのような役割を持っているかです。

まずは、
・article：独立したコンテンツ
・section：同じテーマの内容をまとめた部分
と覚えておきましょう。

この違いが分かると、article の中に section を入れる場合や、section の中に article を入れる場合も、ページの内容に合わせて考えられるようになります。

articleタグを入れ子にするケース

article の中に、さらに article を配置するケースがあります。

このような構造を使うのは、親となるコンテンツの中に、それ自体も独立したコンテンツとして成立する内容が含まれている場合です。

つまり、単に「記事の中に別の内容があるから article を入れる」のではありません。

内側のコンテンツだけを取り出しても、一つの独立したコンテンツとして意味が通じるかがポイントになります。

articleの中にarticleを配置する考え方

article の中に、article を配置するのは、親となるコンテンツの中に、それ自体も独立したコンテンツとして成立する内容が含まれている場合です。

たとえば、ブログ記事の中に、その記事について書かれた読者のコメントが複数あるケースを考えてみます。

ブログ記事そのものが一つの独立したコンテンツであるのに対して、コメントも「誰が、どのような内容を書いたのか」という独立した投稿として扱うことができます。

このような場合は、外側の article の中に、コメントを表す article を配置できます。

<article>
  <h1>おすすめの旅行先</h1>
  <p>記事の本文がここに入ります。</p>

  <div class="comments">
    <h2>読者のコメント</h2>

    <article>
      <p>とても参考になりました！来月行ってみます。</p>
    </article>

    <article>
      <p>ここのホテルもおすすめですよ。</p>
    </article>
  </div>
</article>

この構造では、外側のarticleがブログ記事、内側のarticleがそれぞれのコメントを表しています。

article（ブログ記事）
└─ article（コメント）
└─ article（コメント）

外側の article が「ブログ記事」、内側の article が「それぞれのコメント」を表しています。

このように、親のコンテンツと強く関連していながら、内側のコンテンツだけを取り出しても意味が通じる場合は、article を入れ子にすることができます。

コメントや関連記事などに使われる

コメント以外にも、article を入れ子にできるケースがあります。
たとえば、ブログ記事の中に関連記事を表示する場合です。

<article>
  <h1>HTMLのarticleタグの使い方</h1>
  <p>articleタグについて解説します。</p>

  <section>
    <h2>関連記事</h2>

    <article>
      <h3>HTMLのsectionタグとは？</h3>
      <p>sectionタグについて解説します。</p>
    </article>

    <article>
      <h3>HTMLのmainタグとは？</h3>
      <p>mainタグについて解説します。</p>
    </article>
  </section>
</article>

この場合、外側の article は現在読んでいるブログ記事です。

その中にある関連記事も、それぞれ単独の記事として成立するため、article で表すことができます。

article（現在の記事）
└─ section（関連記事）
     ├─ article（関連記事1）
     └─ article（関連記事2）

ただし、「コメントだから article」「関連記事だから article」と機械的に決めるわけではありません。

たとえば、関連記事のタイトルだけを一覧として表示している場合など、必ずしもそれぞれを article として扱う必要があるとは限りません。

大切なのは、コメントや関連記事という名前ではなく、その内容が独立したコンテンツとして成立しているかどうかです。

むやみにarticleを使わない

article を入れ子にできるからといって、ページの中にある内容を何でも article で囲むのは避けましょう。

article は、独立したコンテンツであることを表すための要素です。
ブログ記事の中にある単なる説明文や、記事を構成する一部分まで article で囲む必要はありません。

たとえば、次のような文章は、ブログ記事の一部として書かれているだけなので、わざわざ article を入れ子にする必要はありません。

<article>
  <h1>HTMLのarticleタグの使い方</h1>

  <p>articleタグは、独立したコンテンツを表す要素です。</p>

  <p>このように、ブログ記事の本文が続いていきます。</p>
</article>

ここで大切なのは、見た目ではなく、HTML 上でその内容がどのような意味を持つのかです。
文章を細かく区切るためだけに article を使ったりするものではありません。

article を使うか迷ったときは、
「この部分だけを取り出しても、一つの独立したコンテンツとして成立する？」
と考えてください。

「はい」と判断できるなら、article を使うことを検討できます。

反対に、単なる説明文や、記事の一部分をまとめているだけであれば、article を使う必要はありません。

この判断を意識すれば、article の入れ子も「タグを重ねる」という考え方ではなく、独立したコンテンツ同士の関係を HTML で表すための構造として理解できるようになります。

articleタグを使ったHTML構造例

ここまで、article と main・section の関係や、article を入れ子にする考え方について見てきました。

最後に、ここまで解説した内容を実際のHTML構造にすると、どのようになるのかを見てみましょう。

ここでは、main の中に複数の article を配置する「記事一覧ページ」と、article の中に section や別の article を配置する「関連記事があるページ」を例に紹介します。

記事一覧ページ

ブログのトップページやニュース一覧など、複数の記事を表示するページでは、main の中に複数の article を配置できます。
それぞれの記事が独立したコンテンツとして成立しているため、個別に article で表します。

<main>
  <h1>新着記事一覧</h1>

  <article>
    <h2>HTMLの基本タグ10選</h2>
    <p>初心者が最初に覚えたい基本的なHTMLタグを紹介します。</p>
  </article>

  <article>
    <h2>CSSで文字の色を変える方法</h2>
    <p>CSSを使って文字や背景の色を変更する方法を解説します。</p>
  </article>

  <article>
    <h2>Webデザイナーになるためのロードマップ</h2>
    <p>Web業界を目指す初心者に向けて、学習の流れを紹介します。</p>
  </article>
</main>

構造は次のようになります。

main
├─ article
├─ article
└─ article

それぞれの記事が独立したコンテンツとして成立しているため、複数の article を並べています。

前の章で説明したように、main の中に入る article は必ず1つとは限りません。