<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 class="forecast">
<h1>Weather forecast for Seattle</h1>
<article class="day-forecast">
<h2>03 March 2018</h2>
<p>Rain.</p>
</article>
<article class="day-forecast">
<h2>04 March 2018</h2>
<p>Periods of rain.</p>
</article>
<article class="day-forecast">
<h2>05 March 2018</h2>
<p>Heavy rain.</p>
</article>
</article>
.forecast {
margin: 0;
padding: 0.3rem;
background-color: #eee;
}
.forecast > h1,
.day-forecast {
margin: 0.5rem;
padding: 0.3rem;
font-size: 1.2rem;
}
.day-forecast {
background: right/contain content-box border-box no-repeat
url("/shared-assets/images/examples/rain.svg") white;
}
.day-forecast > h2,
.day-forecast > p {
margin: 0.2rem;
font-size: 1rem;
}
ある文書に複数の記事を含めることができます。たとえば、読者がスクロールするたびに各記事のテキストを次々と表示するブログでは、各記事は <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 # the-article-element |