<article>要素

Technical Summary

定義・categories・使用場所

HTML Standardはarticleを、独立して配布または再利用できることを原則とする「完結した内容」と定義します。「独立」は、親ページやサイトの情報と一切関係しないという意味ではありません。記事本文そのものを1つの内容として扱えるかを示します。

「独立した内容」の境界

独立して読めるかは、公開したページのURL、見た目のカード、データベース上の単位だけでは決まりません。本文をフィードや検索結果など別の場所へ取り出しても、1つの内容として扱えることが目安です。HTMLにarticleを置くだけで、配信・抽出・再利用が自動で実行されるわけではありません。

仕様が挙げる例には、ニュースや雑誌の記事、ブログ投稿、利用者のコメント、独立して扱えるウィジェットがあります。これらは例であって、特定のURL形式やCMSの仕組みを要求しません。

<main>
  <h1>お知らせ</h1>
  <article aria-labelledby="notice-title">
    <h2 id="notice-title">受付時間を変更します</h2>
    <p>来月から受付時間を変更します。</p>
    <p>公開日: <time datetime="2026-10-30">2026年10月30日</time></p>
  </article>
</main>

この例では、mainがページの主コンテンツを示し、articleが一覧の中の一つのお知らせを示します。timeは日付を明示する要素です。日付を含めただけで、記事の配信機能や構造化データが自動で追加されるわけではありません。

入れ子と内容の関係

articleの中に別のarticleがある場合、内側は外側の記事に関係する記事を表します。たとえば、ブログ投稿を外側にし、その投稿へのコメントを内側に置けます。要素を入れ子にしただけでスレッド表示や返信機能が作られるわけではありません。

<article aria-labelledby="post-title">
  <h2 id="post-title">週末の公園で見つけた鳥</h2>
  <p>池の近くで白い鳥を見かけました。</p>
  <article aria-labelledby="comment-title">
    <h3 id="comment-title">コメント</h3>
    <p>私も先週、同じ場所で見ました。</p>
  </article>
</article>

内側の記事の著者・見出し・日付などは、外側の記事の情報を自動で引き継ぎません。HTML Standardは、記事に関連付く著者情報が内側の記事には適用されないことを明記しています。WAI-ARIAのarticle roleも、入れ子の記事に関連するauthor・heading・dateなどを親から引き継がないと説明します。

article・section・main・div

要素は組み合わせられます。mainの中に複数のarticleを並べたり、ひとつのarticleの中で話題をsectionに分けたりできます。sectionの中に複数の記事を置くこともできます。組み合わせは、HTMLの内容モデルとページの意味に沿って判断します。

見出し・名前・アクセシビリティ

articleを置いても見出しは自動で作られず、h1〜h6のレベルも自動では変わりません。見出しは文書全体の階層に合わせます。見出しを持つまとまりには、読者が内容を把握しやすい見出しを実際のHTMLに置きます。

HTML-AAM 1.0 Working Draftは、HTMLのarticleをWAI-ARIAのarticle roleに対応付けます。WAI-ARIAではこのroleは文書構造を示し、ナビゲーション用landmarkではありません。また、roleのaccessible nameはauthorから与える種類で、role定義上名前が必要です。見える見出しをaria-labelledbyで参照すると、見出しとarticleを明示的に結び付けられます。HTML要素自体の意味があるため、通常はrole="article"を重ねて書く必要はありません。

<article aria-labelledby="review-title">
  <h2 id="review-title">利用者レビュー</h2>
  <p>この例では見出しの文字列をarticleの名前として参照します。</p>
</article>

この名前の付け方は、すべての小さなまとまりをlandmark化するためではありません。ページの中心領域へ移動する目的にはmainなどのlandmarkを使い、articleは独立した内容の構造を伝えるために使います。

Fact / Evidence（主張 / 根拠）

仕様の定義、HTML-AAMのrole mapping、WAI-ARIA roleの特性を別の根拠として追跡します。実装観測とWPTの結果は、ここに示す環境と選定範囲に限定します。

Evidence

1. HTML Living Standard: The article element — categories, context, content model, definition, examples, nesting, and author information
2. HTML Living Standard: The section element — thematic groups and the article/section usage distinction
3. HTML Accessibility API Mappings 1.0 Working Draft, 21 October 2026: article — the HTML article role mapping
4. WAI-ARIA 1.2: article role — document structure role, author naming, and the distinction from landmarks
5. Web Platform Tests: html-aam/roles.html at revision 68d964a5f292bc4b2c2eba2f21e2b916190b6ad2 — selected computed-role checks, including article

Implementation Evidence

2026-10-30にChromium 151で4ページを観測し、幅320〜1920px、言語切替、system/light/darkを確認しました。固定したWPTの1ファイルは60/60項目が成功し、articleの項目も成功しました。このWPT実行ではroleを読む部分にChromium DevTools Protocolを使っているため、公式のwptrunner実行とは区別してください。詳しい条件はEvidence表に記録しています。

Coverage / Open Issues

• 仕様確認済み意味、categories、context、content model、section/mainとの境界、入れ子、HTML-AAM / WAI-ARIA role
• 実測した範囲4つの日英ページ、5つの画面幅、3つのtheme設定、Chromium Accessibility Tree、固定WPT 1ファイル
• 未完了他ブラウザーとOS、Windows UI Automation・IAccessible2等のplatform API、支援技術の読み上げ、HTML-AAM/WPT全体

実測の結果と対象条件は、表のEvidence記録を参照してください。別のブラウザー・OS、WindowsのAccessibility API、読み上げ、WPTの全体は未確認です。この1ブラウザーと1ファイルの結果を、すべての環境の適合確認へ一般化しません。

Related surface

• Yugien: article要素をやさしく確認
• English Atlas: The article Element
• section要素: 話題のまとまりと見出し
• main要素: ページの主コンテンツ