最終更新日

article要素

ドキュメントやページ、アプリケーション、サイトを構成する一部分で、その部分だけを単独で配布や再利用できるような区切りを示します。具体的には、雑誌や新聞の記事、ブログ記事のエントリー、ユーザーが投稿したコメント、ウィジェットやガジェットなど、コンテンツの独立した一項目が該当します。

article要素を入れ子構造にする場合、内部のarticle要素は原則的に、外部のarticle要素のコンテンツに関連したものにすることが必要です。たとえばブログサイトで、ブログ記事のエントリーを示すarticle要素内に、ユーザー投稿コメントを示すarticle要素を含めることができます。

また、time要素のpubdate属性を使って、article要素の発行日情報を提供することが可能です。

article要素は、Flowコンテンツの記述箇所で使用できます。

HTML5での変更点
・article要素は、HTML5で追加された新しい要素です。
カテゴリ タグの省略 親要素 子要素
Flowコンテンツ
Sectioningコンテンツ
省略不可 Flowコンテンツを子にできる要素 Flowコンテンツ
属性 説明
グローバル属性 - -
イベント属性 - -
サンプルコード
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>エビフィレオ</title>
  </head>
  <body>
    <h1>エビフィレオ</h1>
    <p>マクドエイドの新メニュー「エビフィレオ」の紹介です。</p>
    <p>外はサクサク、中はエビ本来のしっかりした歯ごたえと深い味わい。</p>
    <section>
      <h1>お客様の声</h1>
      <article>
        <p>鈴木</p>
        <p>とても美味しかったです。</p>
      </article>
      <article>
        <p>ジャック</p>
        <p>ベリーグッド!</p>
      </article>
    </section>
  </body>
</html>
参考文献:W3C HTML5「4.4.4 The article element」外部リンク
HOME