HTMLのarticleタグとは?使い方・sectionタグとの違い・divとの使い分けも解説

2025年4月5日

HTMLでページを構造化する際、「articleタグって実際どう使えばいいの？」と疑問に思ったことはありませんか？この記事では、HTML5で導入されたarticleタグの基本から、sectionタグ・divとの違いや使い分け、CSSでの活用、さらには「articleの中にarticleはアリ？」といったよくある疑問まで、初心者にもわかりやすく解説します。

articleタグとは？意味と基本構造

article要素の定義

HTMLのarticle要素は、「独立した内容のまとまり」を示すために使われます。具体的には、ブログ記事・ニュース記事・ユーザー投稿・商品紹介など、他の文脈に依存せずに単体で成立する情報を囲むタグです。

<article>
  <h2>HTMLの基本構造とは？</h2>
  <p>HTMLはWebページの骨組みを作るためのマークアップ言語です...</p>
</article>

article要素の特徴

RSSなどで配信する際に適している
検索エンジンに「ここからここまでがひとつの記事」と明確に伝えられる
セマンティックなHTML（意味を持つ構造）に役立つ

HTML articleタグの使い方と具体例

HTML article 使い方：よくあるパターン

1. ブログの記事

<article>
  <header>
    <h2>JavaScriptの変数とは？</h2>
    <p>2024年4月20日 | 投稿者：管理人</p>
  </header>
  <section>
    <p>JavaScriptにおける変数とは...</p>
  </section>
</article>

2. ニュースメディアでの掲載情報

<article>
  <h2>東京都で新たな条例が施行</h2>
  <p>2024年4月より施行された条例により...</p>
</article>

3. コメントやレビュー

<article>
  <p>この商品、本当に買って良かった！</p>
  <footer>ユーザー名：山田太郎</footer>
</article>

articleタグとsectionタグの違いとは？

html article> <section 違い

article：独立した文脈（記事単体で意味をなす）
section：主に見出しごとに構成を分けたいときに使用

article sectionタグの使い分けイメージ

<article>
  <h2>HTMLの基本</h2>
  <section>
    <h3>HTMLとは？</h3>
    <p>Webの構造を作る言語...</p>
  </section>
  <section>
    <h3>HTMLの歴史</h3>
    <p>HTMLは1990年代に...</p>
  </section>
</article>

上記のように、「大枠＝article」「その中での細分化＝section」と考えると理解しやすいです。

html article> </section 使い方はNG？

構文として正しくないのは、sectionを閉じない・ネスト構造を破る書き方です。

✅ 正しい例：

<article>
  <section>
    <h3>概要</h3>
    <p>本文...</p>
  </section>
</article>

❌ 誤った例：

<article>
  <section>
    <h3>概要</h3>
    <p>本文...</p>
</article>
</section> <!-- 閉じタグの順序が誤り -->

articleタグとdivとの違い・使い分け

HTML article divの関係

タグ	目的	意味の有無
`<article>`	意味のある独立記事を示す	あり（セマンティック）
`<div>`	汎用のコンテナ要素	なし（スタイルやJS操作用）

記事やレビュー、ブログ記事のような「意味を持つ情報」にはarticleを、それ以外のデザインやレイアウト目的にはdivを使うのが基本です。

CSS article 使い方：デザインのポイント

article {
  padding: 20px;
  border: 1px solid #ccc;
  margin-bottom: 30px;
  background-color: #f9f9f9;
}

よく使われるプロパティ

margin：記事同士の余白
padding：内側の余白
border：区切り線
background-color：視認性の向上

スマホなどのレスポンシブ対応でも、articleをしっかり囲んでCSS設計することで、情報のまとまりが明確になります。

articleの中にarticleはアリ？

Articleの中に article

原則として「アリ」です。以下のような構造が該当します。

例：1つの記事の中に複数のユーザーレビュー

<article>
  <h2>iPhone 15レビュー</h2>
  <p>本体の質感やカメラ性能が向上...</p>

  <article>
    <h3>ユーザーAの感想</h3>
    <p>非常に満足です！</p>
  </article>

  <article>
    <h3>ユーザーBの感想</h3>
    <p>バッテリーの持ちは改善してほしい...</p>
  </article>
</article>

ただし、過度なネストや構造の混乱を防ぐため、必要性があるときだけ使用しましょう。

よくある質問（FAQ）

Q. articleタグとsectionタグの見た目に違いはありますか？

A. 見た目の違いはありません。あくまでHTML上の意味づけの違いで、スタイルはCSSで自由に設定します。

Q. articleタグはSEOに効果がありますか？

A. 検索エンジンにとって意味構造が明確になるため、間接的にSEO効果が期待できます。

Q. divで全部囲んじゃダメ？

A. divは意味を持たない汎用要素なので、記事本文やレビューなど意味のあるブロックにはarticleやsectionを使うほうがHTMLとして適切です。

まとめ：articleタグは意味ある情報のまとまりに使おう

articleは「独立した意味ある情報ブロック」を囲む要素
sectionは構造の細分化、divは汎用的なコンテナという役割
articleの中にsection、必要に応じてarticle内articleも可
CSSで装飾しやすく、SEO的にも意味付けが明確になる

HTMLの構造を正しく組み立てることは、見た目の整備だけでなく、保守性・アクセシビリティ・SEOにも大きく貢献します。ぜひこの記事を参考に、セマンティックで意味あるHTMLを心がけてみてください。