<article>: 記事コンテンツ要素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
<article>
は HTML の要素で、文書、ページ、アプリケーション、サイトなどの中で自己完結しており、(集合したものの中で)個別に配信や再利用を行うことを意図した構成物を表します。例えば、フォーラムの投稿、雑誌や新聞の記事、ブログの記事、商品カード、ユーザーが投稿したコメント、対話型のウィジェットやガジェット、その他の独立したコンテンツの項目が含まれます。
試してみましょう
ある文書に複数の記事を含めることができます。たとえば、読者がスクロールするたびに各記事のテキストを次々と表示するブログでは、各記事は <article>
要素に含まれ、おそらくその中に 1 つ以上の <section>
があります。
コンテンツカテゴリー | フローコンテンツ, 区分コンテンツ, 知覚可能コンテンツ |
---|---|
許可されている内容 | フローコンテンツ |
タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
許可されている親要素 |
フローコンテンツを受け入れるすべての要素。なお、 <article> 要素を
<address> 要素の子孫にしてはいけません。
|
暗黙の ARIA ロール |
article
|
許可されている ARIA ロール |
application , document ,
feed , main ,
none , presentation ,
region
|
DOM インターフェイス | HTMLElement |
属性
この要素にはグローバル属性のみがあります。
使用上の注意
- それぞれの
<article>
は、子要素として見出し(<h1>
-<h6>
要素)を含むなどの方法で識別できるようにするべきです。 <article>
要素を入れ子にした場合、内側の要素は外側の要素に関する記事を表します。例えばブログ投稿へのコメントは、ブログ投稿を表す<article>
内へ入れ子にした<article>
要素にできます。<article>
要素の著者情報は<address>
要素で提供できますが、入れ子にされた<article>
要素には適用されません。<article>
要素の発行日時は、<time>
要素のdatetime
属性で示すことができます。
例
HTML
html
<article class="film_review">
<h2>Jurassic Park</h2>
<section class="main_review">
<h3>Review</h3>
<p>Dinos were great!</p>
</section>
<section class="user_reviews">
<h3>User reviews</h3>
<article class="user_review">
<h4>Too scary!</h4>
<p>Way too scary for me.</p>
<footer>
<p>
Posted on
<time datetime="2015-05-16 19:00">May 16</time>
by Lisa.
</p>
</footer>
</article>
<article class="user_review">
<h4>Love the dinos!</h4>
<p>I agree, dinos are my favorite.</p>
<footer>
<p>
Posted on
<time datetime="2015-05-17 19:00">May 17</time>
by Tom.
</p>
</footer>
</article>
</section>
<footer>
<p>
Posted on
<time datetime="2015-05-15 19:00">May 15</time>
by Staff.
</p>
</footer>
</article>
結果
仕様書
Specification |
---|
HTML Standard # the-article-element |
ブラウザーの互換性
BCD tables only load in the browser