<article>個別記事を示す

<article>タグは、HTML文書内で独立した記事を示します。 例えば、ブログの最新記事一覧のページで個々の記事に対応する部分やコメント欄、雑誌や新聞などの一つの記事など、その部分が独立した記事として扱える箇所が該当します。 このように、セクションの中でもそれだけで完結している内容である事を示す際は<article>タグを使用します。

また<article>は入れ子にする事もできます。 例えばブログの一つの記事に複数のコメントが投稿されている場合、article要素で記事全体を囲みます。 そしてその内部にある各コメントごとにarticle要素を配置することなどができます。

article要素はsection要素と混同されがちな要素ですが、article要素はHTML文書・サイト・ページにおいて「独立した部分」を構成するセクションに対して利用する要素です。 それに対してsection要素は、HTML文書内をその意味・目的ごとに切る場合に使用します。

なおarticle要素内の<address>タグで示した作者情報は、入れ子のarticle要素には適用されません。 またarticle要素を入れ子として使用する場合、内側のarticle要素は、外側のarticle要素の内容と関連したものにします。

HTML5での変更点

article要素は、新しくHTML5で追加されました。

書式

  • <article 属性="値">~</article> ……… 文書内の個別記事を示す

使用した時の例

<article>
 <h1>読書</h1>
 <p>本読んでました</p>
   <article>
    <h2>コメント</h2>
    <p>何の本ですか?</p>
   </article>
</article>
<article>
  <h2>つるの恩返し</h2>
  <p>昔むかしあるところに....</p>
  <cite>「日本昔話」</cite>
</article>
<article>
  <h2>かさじぞう</h2>
  <p>むかし、昔、人里離れた....</p>
  <cite>「日本昔話2」</cite>
</article>

対応ブラウザなどのデータ

形式 <article>~</article> カテゴリ フローコンテンツ, セクショニングコンテンツ
親要素 フローコンテンツが期待される場所 子要素 フローコンテンツ
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer9~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~