article 要素

4.3.2 article 要素

カテゴリー:
フロー・コンテント 、ただし、子孫に main 要素がないこと。
セクショニング・コンテント
パルパブル・コンテント
この要素を使うことができるコンテキスト:
フロー・コンテントが期待される場所
コンテントモデル:
フロー・コンテント
コンテント属性:
グローバル属性
text/html におけるタグの省略:
どちらのタグも省略できません。
指定可能な ARIA role 属性 の値:
article (デフォルト - 指定不要), application, document or main.
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性
DOM インタフェース:
HTMLElement を使う

article 要素は、ドキュメント、ページ、アプリケーション、サイトの中の完全な、または、自己完結した構成を表します。つまり、原則的には、シンジケーションのように、単独で再配布でき再利用できるものです。これはフォーラムの投稿、雑誌や新聞の記事、ブログのエントリ、ユーザーが投稿したコメント、インタラクティブなウィジットやガジェットなど、コンテンツの独立した記事項目が考えられます。

article 要素がネストされる場合、内側の article 要素は、原理上は外側の article のコンテンツに関連した記事を表します。例えば、ユーザーが投稿するコメントを受け付けるサイトでのブログのエントリは、そのブログのエントリの article 要素の中にネストされた article 要素として、そのコメントを表すことができます。

article 要素に関連付けられた著者情報(address 要素を参照のこと)は、ネストされた article 要素には適用されません。

とりわけ、コンテンツをシンジケーションで再配布するために使う場合、その article 要素は、その目的という意味において、Atom における entry 要素に類似しています。 [ATOM]

ページのメインコンテンツ(つまり、フッター、ヘッダー、ナビゲーションブロック、サイドバーを除外したもの)すべてがひとつの自己完結な構成になるとき、そのコンテンツは main 要素でマークアップされるべきです。そのコンテンツを、さらに article 要素でもマークアップすることができます。しかし、この場合においては、厳密には、冗長なことです(そのページはひとつのドキュメントなわけですから、そのページがひとつの構成であることは自明だからです)。

この例では、article 要素を使ってブログ投稿が表示されています。いくつかの schema.org 注記が入れられています:

<article itemscope itemtype="http://schema.org/BlogPosting">
 <header>
  <h1 itemprop="headline">生活でとっても重要なこと</h1>
  <p><time itemprop="datePublished" datetime="2009-10-09">3日前</time></p>
  <link itemprop="url" href="?comments=0">
 </header>
 <p>マイクロフォンが君のそばにあったら、そいつはヤバイぞ。
 君がしゃべったことを世界中に撒き散らしてる思え。マジで。</p>
 <p>...</p>
 <footer>
  <a itemprop="discussionUrl" href="?comments=1">コメントを表示する</a>
 </footer>
</article>

これは同じブログ投稿ですが、いくつかのコメントが表示されています:

<article itemscope itemtype="http://schema.org/BlogPosting">
 <header>
  <h1 itemprop="headline">生活でとっても重要なこと</h1>
  <p><time itemprop="datePublished" datetime="2009-10-09">3日前</time></p>
  <link itemprop="url" href="?comments=0">
 </header>
 <p>マイクロフォンがお前のそばにあったら、そいつはヤバイぞ。
 お前がしゃべったことを世界中に撒き散らしてる思え。マジで。</p>
 <p>...</p>
 <section>
  <h1>コメント</h1>
  <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c1">
   <link itemprop="url" href="#c1">
   <footer>
    <p>投稿者: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
     <span itemprop="name">ジョージ・ワシントン</span>
    </span></p>
    <p><time itemprop="commentTime" datetime="2009-10-10">15分前</time></p>
   </footer>
   <p>そうだな!特にお前のロビイストの友達についてしゃべっているときな!</p>
  </article>
  <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c2">
   <link itemprop="url" href="#c2">
   <footer>
    <p>投稿者: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
     <span itemprop="name">ジョージ・ハモンド</span>
    </span></p>
    <p><time itemprop="commentTime" datetime="2009-10-10">5分前</time></p>
   </footer>
   <p>おい、お前は俺と同じ名字だな。</p>
  </article>
 </section>
</article>

それぞれのコメントに情報(誰がいつそれを書いたのかなど)を与えるために footer 要素を使っている点に注目してください:footer 要素は、この場合のように、適切であれば、そのセクションの最初に現れることもあります。(この場合に header 要素を使っても間違いではありません。これは編集環境の設定の話と言っても良いでしょう。)


※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/sections.html#the-article-element