<article>－HTML Living Standard リファレンス

★HTML Living Standard リファレンス

<article> …… 自己完結する内容であることを表す
Internet Explorer

<article>タグは、それ単体で自己完結する内容であることを表す際に使用します。

例えば、ブログのエントリ、ユーザーが投稿したコメント、雑誌や新聞の記事、フォーラムの投稿、インタラクティブなウィジェット、その他の独立したコンテンツアイテムなどが、article要素としてマークアップされる可能性があります。

article要素としてマークアップするべきか迷う場合には、それ単体で自己完結するかどうか、独立して配布できるかどうか、再利用できるかどうかについて考えてみるとよいでしょう。

■使用例

以下のサンプルは、ポータルページで提供されるウィジェットをarticle要素でマークアップした使用例です。各ウィジェットごとに1つのarticle要素としてまとめています。

HTMLソース

<!doctype html>
<html lang=ja>
<title>マイポータル</title>
<script src="/scripts/widgets.js"></script>
<link rel=stylesheet href="/styles/main.css">

<article is="stock-widget">
 <h2>株式情報</h2>
 <table>
  <thead> <tr> <th> 株式 <th> 株価 <th> 変動
  <tbody> <template> <tr> <td> <td> <td> </template>
 </table>
 <p> <input type=button value="最新情報に更新" onclick="this.parentElement.refresh()">
</article>

<article is="news-widget">
 <h2>ニュース</h2>
 <ul>
  <template>
   <li>
    <p><img> <strong></strong>
    <p>
  </template>
 </ul>
 <p> <input type=button value="最新情報に更新" onclick="this.parentElement.refresh()">
</article>

↓↓↓

ブラウザ上の表示

株式情報

銘柄	株価	変動

ニュース

article要素の入れ子

article要素が入れ子になっている場合、内側のarticle要素は外側のarticleの内容に関連する記事を表します。

例えば、ブログエントリとそれに対するユーザー投稿コメントを、それぞれarticle要素としてマークアップする場合、外側にブログエントリのarticle要素を配置して、その内側に子要素としてユーザー投稿コメントのarticle要素を配置するのが一般的です。

■使用例

以下のサンプルは、article要素を入れ子にして、ブログエントリとそれに対するコメントであることを表しています。ブログエントリのarticle要素に関連付けてaddress要素で著者情報を示していますが、この著者情報はユーザー投稿コメントのarticle要素にまでは適用されません。

HTMLソース

<article itemscope itemtype="http://schema.org/BlogPosting">

 <header>
  <h2 itemprop="headline">近くにマイクがある場合</h2>
  <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/Comment" id="c1">
   <link itemprop="url" href="#c1">
   <footer>
    <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
     <span itemprop="name">ジョージ・ワシントン</span>
    </span></p>
    <p><time itemprop="dateCreated" datetime="2009-10-10">15分前</time></p>
   </footer>
   <p>同意！大切な問題について話すときは特に！</p>
  </article>

  <article itemprop="comment" itemscope itemtype="http://schema.org/Comment" id="c2">
   <link itemprop="url" href="#c2">
   <footer>
    <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
     <span itemprop="name">ジョージ・ハモンド</span>
    </span></p>
    <p><time itemprop="dateCreated" datetime="2009-10-10">5分前</time></p>
   </footer>
   <p>あなたは私と同じファーストネームを持っていますね。</p>
  </article>
 </section>

 <footer>
  <address>このエントリの筆者の <a href="mailto:[email protected]">メール</a></address>
 </footer>

</article>

↓↓↓

ブラウザ上の表示

近くにマイクがある場合

3日前

近くにマイクがある場合は、あなたの発言が世界中に発信されていると想定してください。

...

同意！大切な問題について話すときは特に！

あなたは私と同じファーストネームを持っていますね。

ちなみに、上記サンプルではコメント投稿者や投稿日の情報をfooter要素でマークアップして、それらをセクションの先頭に配置していますが、 footer要素の代わりにheader要素を使用しても良いでしょう。どちらを使うかは好みの問題です。

■使用例

以下のサンプルは、article要素でマークアップしたブログエントリです。 article要素には、itemscope属性やitemtype属性を使用して「schema.org」を記述しています。「schema.org」は、記事の詳細情報を検索エンジンに伝えるための記法です。

HTMLソース

<article itemscope itemtype="http://schema.org/BlogPosting">

 <header>
  <h2 itemprop="headline">近くにマイクがある場合</h2>
  <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>

↓↓↓

ブラウザ上の表示

近くにマイクがある場合

3日前

近くにマイクがある場合は、あなたの発言が世界中に発信されていると想定してください。

...

article要素とsection要素の使い分け

article要素とsection要素の使い分けですが、 article要素は「それ自体で自己完結するもの」、 section要素は「何らかの一部を形成するもの」なので、基本的にはそれを基準に判断します。

例えば、様々なりんごの種類を紹介する文章のなかに、「グラニースミスはアップルパイの材料に最適です。」という記述がある場合、あくまでも文章の一部ですからsection要素のほうが適切でしょう。

一方、ツイート、redditのコメント、tumblrの投稿、新聞広告などで、「グラニースミスはアップルパイの材料に最適です。」と記述されていて、それがすべてであればarticle要素のほうが適切でしょう。

実際のところは、article要素とsection要素の使い分けは、作者の意図によって決まるものと言えそうです。

例えば、記事へのコメントは独立した内容と解釈できるので、コメントひとつひとつがarticle要素になりえます。一方、作者が「コメント込みで1つの記事」と意図しているなら、記事へのコメントはsection要素とするほうが適切でしょう。

■関連項目

<body> …… 文書の本体（コンテンツ）を表す
<article> …… 自己完結する内容であることを表す
<section> …… 一般的なセクションを表す
<nav> …… ナビゲーションリンクのセクションを表す
<aside> …… メインコンテンツとは別のコンテンツであることを表す
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> …… セクションの見出しを表す
<hgroup> …… 見出しとその関連コンテンツを表す
<header> …… 導入部分やナビゲーション補助のグループを表す
<footer> …… フッターを表す
<address> …… 連絡先情報を表す

★HTML Living Standard リファレンス

■使用例

HTMLソース

ブラウザ上の表示

株式情報

ニュース

article要素の入れ子

■使用例

HTMLソース

ブラウザ上の表示

コメント

■使用例

HTMLソース

ブラウザ上の表示

article要素とsection要素の使い分け

■関連項目

Sponsors