<article>要素
英語で「記事」を表す”article”より。
「ブログ記事」などの、「一つの独立した文章」になるような部分をグループ化するのに使います。
<article> 要素はあくまでも、文書の「意味的なまとまり」を表すためのものなので、標準では見た目は何も変わりません。
<aricle>要素内には、子要素として <h1> 〜 <h6> の見出し要素を含めて識別できるようにするのが望ましいです。
<article>要素を入れ子にすることも出来ますが、内側の要素は外側の要素に関連する記事となるようにします。
例えば、「ブログ記事」の本文を <article> 要素内に記述し、その記事に対する「コメント」をさらに <article> 要素内に記述する、といった具合にします。
<article>要素の著者情報は、子要素にした <address> 要素で表しますが、入れ子にされた <address> 要素には適用されません。
<article>要素の発行日時は、子要素にした <time> 要素のdatetime属性で表します。
子要素として使用できるもの
フローコンテンツを記述できます。
親要素として使えるもの
フローコンテンツを受け入れるすべての要素。ただし、<address> 要素を親要素にすることは出来ません。
許可されている ARIA ロール
application, document, feed, main, presentation, region
DOMインターフェース
HTMLElement
属性
グローバル属性のみが指定できます。
サンプル
以下の例では、他の文書の「意味的なまとまり」を表すための要素も合わせて作成した例を示します。
See the Pen KKKXxdX by Masahiko Iwakiri (@m-iwakiri) on CodePen.
このサイトでは、HTML要素や属性の定義は下記サイトを参考にしています。
MDN Web Docs： https://developer.mozilla.org/ja/
W3C仕様の正確な定義、最新情報は上記サイトをご覧ください。
コメント