HTMLのarticleタグの使い方！

html

HTMLのarticleタグについて書いています。

articleタグは、Webページ内で自己完結しており、独立して配信または再利用できるコンテンツを表すために使用されます。
ブログ記事、ニュース記事、フォーラムの投稿、ウィジェット、またはその他の独立したコンテンツのまとまりをマークアップするのに適しています。

articleタグの基本的な使い方と配置

articleタグは、独立したコンテンツのまとまりを囲むだけで使用できます。
<section>タグと同様に、内部に見出し (<h1>～<h6>) や段落 (<p>)、画像 (<img>) など、関連するコンテンツを含めることができます。

<article>
  <h2>ブログ記事のタイトル</h2>
  <p class="byline">投稿日：2025年5月19日 | 著者：山田 太郎</p>
  <p>記事の本文...</p>
  <footer>
    <p><a href="/comments/123">コメント (3件)</a></p>
  </footer>
</article>

上記の例では、ブログ記事全体を<article>タグでマークアップしています。
ブラウザで確認すると、下記のように表示されました。
ブラウザで表示されたHTMLのarticleタグの例

articleタグの意味合いと重要性

articleタグは、囲まれたコンテンツが単独で意味を持ち、他の文脈から切り離しても内容が成立することを示すタグです。
これは、単にコンテンツをグループ化するためだけでなく、Webページの構造を明確にし、検索エンジンやスクリーンリーダーなどの支援技術がコンテンツの役割を正しく認識できるようにするために重要です。

articleタグとアクセシビリティ

articleタグを適切に使用することは、Webサイトのアクセシビリティ向上に貢献します。

  • 構造の理解: スクリーンリーダーは、articleタグを認識し、ユーザーに「これは独立したコンテンツのまとまりである」と伝えることができます。これにより、Webページの構造を理解しやすくなります。
  • ランドマーク要素: articleタグは、ARIA landmark roleのarticleを暗黙的に持ちます。これにより、支援技術のユーザーは、article要素に直接移動することができます。
  • 適切な見出し: articleタグ内には、内容を適切に表す見出し (<h1>～<h6>) を含めることが推奨されます。これにより、コンテンツの構造がより明確になり、アクセシビリティが向上します。

articleタグの使用例

articleタグは、以下のような独立したコンテンツをマークアップする際に使用します。

  • ブログ記事、ニュース記事
  • フォーラムの投稿、コメント
  • 製品情報
  • 埋め込みウィジェット（例：天気予報、株価情報）
  • 独立した章やセクション（書籍、ドキュメントなど）

articleタグは、他のセクション関連要素 (<section>, <aside>) と組み合わせて、より複雑なWebページの構造を表現することができます。

articleタグを使用する際の注意点

  • 独立したコンテンツに限定する: articleタグは、そのコンテンツ単体で意味が通じる場合にのみ使用するべきです。Webページ全体をarticleタグで囲むのは適切ではありません。
  • 関連性の高いコンテンツをまとめる: articleタグは、意味的に関連性の高いコンテンツをまとめるために使用します。単に見た目を区切るためだけに使用するべきではありません。
  • 見出し要素を含める: articleタグ内には、内容を適切に表す見出し要素 (<h1>～<h6>) を含めることが推奨されます。
  • セクションとの使い分け: 関連するコンテンツのまとまりで、独立して再利用する意図がない場合は、<section>タグを使用する方が適切な場合があります。articleは、より独立性の高いコンテンツに使用します。
  • スタイリングはCSSで: articleタグ自体の見た目や、その内部の要素のスタイルは、CSSで制御します。

articleタグの記述例

以下に、様々な独立したコンテンツをarticleタグでマークアップした例を示します。

<article>
  <header>
    <h2>夏の旅行におすすめのスポット</h2>
    <p class="byline">公開日：2025年5月19日</p>
  </header>
  <img src="summer-beach.jpg" alt="夏のビーチ">
  <section>
    <h3>美しい砂浜</h3>
    <p>本文...</p>
  </section>
  <section>
    <h3>新鮮な海の幸</h3>
    <p>本文...</p>
  </section>
  <footer>
    <p>カテゴリ：<a href="/travel">旅行</a></p>
  </footer>
</article>

<article>
  <h3>ユーザーコメント</h3>
  <p>ユーザー名：〇〇さん</p>
  <p>コメント内容：素晴らしい記事でした！</p>
  <footer>
    <p>投稿日：2025年5月19日</p>
  </footer>
</article>

<article>
  <header>
    <h3>今日の天気</h3>
  </header>
  <p>福岡県筑紫野市は晴れ、最高気温は28℃の予想です。</p>
</article>

まとめ

articleタグは、Webページ内で独立して意味を持つコンテンツのまとまりを意味的にマークアップするための重要なHTML要素です。

ブログ記事、ニュース記事、コメントなど、再利用可能なコンテンツを適切にarticleタグで囲むことで、Webページの構造が明確になり、アクセシビリティが向上し、検索エンジンにも理解されやすくなります。
独立したコンテンツをマークアップする際には、積極的にarticleタグを活用しましょう。

HTML
yasuaki

コメント