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

★HTML Living Standard リファレンス

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

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

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

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

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

この際、ブログエントリのarticle要素に関連付けて address要素などで著者情報を示した場合、この著者情報は子要素のユーザー投稿コメントのarticle要素にまでは適用されません。

■使用例

以下のサンプルは、「schema.org」注釈とともにarticle要素を使用したブログエントリです。「schema.org」とは、itemscope属性、itemtype属性、itemprop属性などを使用して、検索エンジン向けに詳細情報を伝えるための記述方法です。

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日前

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

...

■使用例

以下のサンプルは、上記と同じブログ投稿ですが、同じ文書内にユーザー投稿コメントを表示しています。

コメント投稿者や投稿日の情報は、footer要素でマークアップしています。 footer要素は必要に応じてセクションの先頭に記述できますが、footer要素の代わりにheader要素を使用しても良いでしょう。この使用例の場合、footer要素とheader要素のどちらを使うかは好みの問題です。

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>

</article>

↓↓↓

ブラウザ上の表示

近くにマイクがある場合

3日前

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

...

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

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

■使用例

以下のサンプルは、ポータルページにおける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>Stocks</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要素とsection要素の使い分け

article要素は、それ自体で自己完結するものです。 section要素は、何らかの一部を形成するものです。ただ実際のところ、どれがどれであるかの本当の答えは「作者の意図による」です。

例えば、りんごの種類をたくさん紹介する文章のなかで、「『グラニースミス』は、ジューシーな青りんごでアップルパイの材料に最適です。」と記述された章がある場合、他の種類のりんごに関する章もありますから、それはsection要素になります。

一方、ツイート、redditのコメント、tumblrの投稿、新聞広告などで、「『グラニースミス』は、ジューシーな青りんごでアップルパイの材料に最適です。」とだけ書かれていてそれがすべてである場合、それはarticle要素になります。

記事へのコメントは、コメントしている記事の一部ではないため独自の記事と解釈できます。つまり、記事へのコメントは、article要素になりえます。

■関連項目

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

★HTML Living Standard リファレンス

■使用例

HTMLソース

ブラウザ上の表示

■使用例

HTMLソース

ブラウザ上の表示

コメント

■使用例

HTMLソース

ブラウザ上の表示

株価の動き

ニュース

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

■関連項目

Sponsors