HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<article>
独立したコンテンツ（記事、コメント、ウィジェットなど）を表すためのセクショニング要素です。
info
概要
<article> 要素は、ドキュメント、ページ、またはサイト内で、それ自体が**完結した独立したコンテンツ**を構成する要素を定義します。
例えば、ブログ記事、ニュース記事、ユーザーコメント、インタラクティブウィジェットなどが該当します。
この要素内のコンテンツは、他のページのコンテキストから切り離されても意味が通じるべきです。
play_circle
デモ (静的表示)
HTML (Source)
<article>
<h2>記事タイトル</h2>
<p>これは独立したコンテンツの抜粋です。</p>
</article>
<br>
<article class="comment">
<h3>ユーザーコメント</h3>
<p>記事に対するコメント内容。</p>
</article>
Preview (Result)
記事タイトル
これは独立したコンテンツの抜粋です。
ユーザーコメント
記事に対するコメント内容。
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| グローバル属性 | 全てのHTML要素で使用できる共通の属性（class, id, langなど）が使用可能です。 |
code
実用例
1. ブログ記事の構造
<article>
<header>
<h2>HTML5における<article>要素の役割</h2>
<p>投稿日: <time datetime="2025-12-14">2025年12月14日</time></p>
</header>
<p>この記事では、<article>要素のセマンティクスについて解説します...</p>
<section>
<h3>まとめ</h3>
<p>article要素はウェブコンテンツの構造化に不可欠です。</p>
</section>
<footer>
<p><a href="#コメント欄">コメント (15件)</a></p>
</footer>
</article>
2. ユーザーコメントの入れ子
<!-- 親記事 -->
<article id="post-1">
<h1>メインコンテンツ</h1>
<p>...</p>
<section id="comments">
<h2>コメント</h2>
<article id="comment-1">
<p>コメント 1: 素晴らしい記事です！</p>
</article>
<article id="comment-2">
<p>コメント 2: 参考にします。</p>
</article>
</section>
</article>
lightbulb
知っておくべき重要事項
layers
<section> との違い
<article> は、**独立して再利用できる**コンテンツの塊を指します。一方、<section> は、ドキュメントのアウトラインの一部として、**関連するコンテンツをグループ化する**ために使われます。単なる見た目のグループ化には <div> を使用します。
accessibility_new
アウトライン（見出し）
<article> 要素の中には、通常 <h1> から <h6> の見出し要素を含めるべきです。これは、スクリーンリーダーや検索エンジンがコンテンツの構造を理解するのに役立ちます。見出しは、その <article> 内の階層を基準に付けることができます。