最終更新日 2021年4月7日

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」

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。