HTMLのarticle要素の使い方を徹底解説！main要素との違いやコード例つき

この記事では、HTMLの<article>要素の基本的な使い方と、実践的な活用シーンをわかりやすく解説します。

HTMLのarticle要素とは

HTMLの<article>タグは、自己完結型（self-contained）のコンテンツを定義するための要素です。「自己完結型」とは、article要素の中に置いたコンテンツが、サイトの他の部分から切り離しても独立して意味が通ることを指します。

たとえば、ブログの1件の投稿、ニュース記事、フォーラムへのコメントなどが該当します。これらはいずれも、単体で配信・再利用できるコンテンツだからです。

articleタグの主な用途

<article>タグは、次のようなサイトで特に効果を発揮します。

• ブログ
• オンラインマガジン
• ニュースサイト

main要素との違い

<main>要素もコンテンツを格納するコンテナですが、両者には重要な違いがあります。<main>は1つのHTMLドキュメント内で1回しか使えないのに対し、<article>タグは同じドキュメント内で何度でも使用可能です。

使い方①：記事そのものを囲む

ブログの個別投稿ページなどでは、記事全体を1つの<article>要素で囲みます。

<article>
  <h1>記事のタイトル</h1>
  <p>本文の段落</p>
  <p>本文の段落</p>
  <img src="your-image.jpg" alt="画像の説明" />
  <p>本文の段落</p>
  <p>本文の段落</p>
</article>

実は、今あなたが読んでいるこのページも、よく似たHTMLマークアップ構造になっています。ページ上で右クリックして「検証（Inspect）」を選択すれば、実際のコードを自分の目で確認できますよ。

使い方②：記事の一覧（フィード）を作る

<article>要素は、複数のコンテンツを一覧表示するときにも活躍します。各記事をそれぞれ独立したarticle要素としてマークアップするのがポイントです。たとえば、個別投稿へのリンク付き記事フィードは次のように書けます。

<div>
  <article>
    <a href="/path-to-blog-post-1">
      <h3>ブログ記事1</h3>
    </a>
  </article>
  <article>
    <a href="/path-to-blog-post-2">
      <h3>ブログ記事2</h3>
    </a>
  </article>
  <article>
    <a href="/path-to-blog-post-3">
      <h3>ブログ記事3</h3>
    </a>
  </article>
</div>

上記の3つのarticle要素は、ブラウザによってそれぞれ「独立した自己完結型コンテンツ」として解釈されます。

article要素を使うメリット

<article>で適切にマークアップすると、次のようなメリットが得られます。

• SEO対策：検索エンジンのクローラーがページの構造とコンテンツの意味を理解しやすくなります。
• アクセシビリティ：スクリーンリーダーなどの支援技術が、記事の範囲を正確に認識できるようになります。
• 保守性：意味のあるタグで構造化されるため、コードの可読性とメンテナンス性が向上します。

その他のHTMLコンテナ要素

<article>タグは、コンテナ要素を定義する多くのHTMLタグのひとつです。よく使われる主なコンテナ要素には以下があります。

<section>、<main>、<header>、<footer>、<form>、そして<div>（他のどのタグも当てはまらない場合に使う汎用タグ）です。目的に応じてこれらを使い分けることで、より semantically な、質の高いHTML文書を作成できます。