HTML Living Standard/article

article 要素

<article> 要素は、HTML文書の中で独立して再利用可能なコンテンツを表すセマンティック要素です。記事、ブログ投稿、フォーラムの投稿、ニュース記事、コメントなどを含む、自己完結型のセクションを定義する際に使用されます。

概要

役割: 独立して意味が通じるコンテンツのセクションを表現します。
主な用途:
- ニュース記事
- ブログ投稿
- フォーラム投稿
- コメントやレビュー
- 商品情報や独立した文書

使用例

基本的な使用例

以下は、<article> 要素をブログ投稿として使用する例です。

<article>
  <h2>HTMLのセマンティック要素とは？</h2>
  <p>セマンティック要素は、HTML文書に構造を与える重要な要素です...</p>
  <footer>
    <p>執筆者: 太郎 | 公開日: 2025年1月6日</p>
  </footer>
</article>

ネストされた使用例

<article> 要素をネストして、コメントセクションを表現することもできます。

<article>
  <h2>ブログ投稿タイトル</h2>
  <p>この投稿では、HTML Living Standardについて説明します...</p>
  <section>
    <h3>コメント</h3>
    <article>
      <p>素晴らしい記事です！とても参考になりました。</p>
      <footer>コメント投稿者: 花子</footer>
    </article>
    <article>
      <p>もう少し具体例があると嬉しいです。</p>
      <footer>コメント投稿者: 一郎</footer>
    </article>
  </section>
</article>

属性

<article> 要素は、グローバル属性をサポートします。

グローバル属性の例

以下の例では、class 属性を使用して、スタイリングのためのクラスを追加しています。

<article class="news-article">
  <h2>新しいHTML規格が発表されました</h2>
  <p>HTML Living Standardは、Web技術の標準化を促進するための文書です...</p>
</article>

`<article>` 要素の仕様

許可される親要素: フローコンテンツを含むほぼすべての要素（例: <body>、<section>、<div> など）。
含めることが推奨されるコンテンツ:
- 見出し（例: <h1> ～ <h6>）
- 段落やメディア要素（例: <p>、<img>、<figure>）
- 子記事としての <article> 要素

使用上の注意

独立性の確保: <article> 内のコンテンツは、それ自体で完結し、文書全体の外部でも意味が通じる必要があります。
重複使用の回避: 非独立的なコンテンツ（例: ナビゲーションリンクや補足的なテキスト）は <article> の使用に適しません。

ベストプラクティス

見出しを含める: <article> 要素内には、コンテンツを適切に説明する見出し（<h1> ～ <h6>）を含めるべきです。
適切な入れ子構造: コメントやレビューなど、階層的に関連付けられたコンテンツには、<article> 要素をネストして使用します。
意味論的適用: 再利用可能なコンテンツにのみ使用し、単なる装飾目的では使用しないようにします。

アクセシビリティの考慮

<article> 要素を適切に使用することで、スクリーンリーダーなどの支援技術が文書の構造を認識しやすくなり、ユーザー体験が向上します。

まとめ

<article> 要素は、独立した再利用可能なコンテンツを定義するために設計されています。ブログ投稿、ニュース記事、フォーラムの投稿など、幅広い用途に使用でき、文書の構造を意味論的に整理するのに役立ちます。