article要素

最終更新日：2023-09-11
公開日：2016-01-19

ページの独立した記事（内容）を表します。ブログの記事、Webマガジンの記事（エントリー）、記事へのコメント、メインコンテンツではない独立したコンテンツなど、様々な場所で使用することができます。

HTML サンプルコード

<main>
  <h1>記事一覧</h1>
  <article>
    <h2>記事タイトル1</h1>
    <p>記事本文</p>
  </article>
  <article>
    <h2>記事タイトル2</h1>
    <p>記事本文</p>
  </article>
  <article>
    <h2>記事タイトル3</h1>
    <p>記事本文</p>
  </article>
</main>

カテゴリー

フローコンテンツ、セクショニングコンテンツ、パルパブルコンテンツ
コンテンツモデル

フローコンテンツ
使用ケース

フローコンテンツが期待される場所（ただし、main要素を子孫要素に持つことはできません）

属性

グローバル属性: グローバル属性のみ使用することができます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。

使用例

ブログの記事ページを想定したサンプルコード

「コーヒーの淹れ方」をテーマに書いた記事で使って、article要素のコードを書いてみます。
記事の大枠をarticle要素で囲み、セクションを分ける部分でsection要素を使っています。

HTML コード例

<body>

<!-- ブログ本文 -->
<main>
  <article>
    <header>
      <h1>コーヒーの淹れ方について</h1>
      <p><b class="lead">多くの方に親しまれているコーヒー。お仕事に、休日のひと時に、目覚めの一杯など様々な場面で飲む機会があります。<br>今回は、そんなコーヒーをより楽しむための美味しい入れ方をご紹介します。</b></p>
    </header>
    <section>
      <h2>まずは淹れ方選びから</h2>
      <p>一言で「コーヒー」と言っても、その淹れ方は様々です。<br>ペーパードリップを使った一般的な方法から、インスタントコーヒーでお手軽にいれる方法、少し手の込んだフレンチプレス。あなたはいつも...</p>
    </section>
    <section>
      <h2>フレンチプレスの淹れ方</h2>
      <p>まずは容器に挽いた豆を入れて、熱湯を容器の半分まで注ぎます。<br>この時、まだ蓋はしないようにしてください。<br>30秒ほど経過した後に...</p>
    </section>
    <section>
      <h2>ペーパードリップの淹れ方</h2>
      <p>まずは容器にペーパーフィルターをセットしますが、ここで折り方を少し工夫していきます。<br>通常であれば...</p>
    </section>
  </article>
</main>
<!-- //ブログ本文 -->

<!-- サイドメニュー -->
<aside>
  <h2>カテゴリー</h2>
  <ul>
    <li><a href="#">HTML5</a></li>
    <li><a href="#">CSS3</a></li>
    <li><a href="#">PHPプログラミング</a></li>
  </ul>
</aside>
<!-- //サイドメニュー -->

</body>

記事一覧