HTML & CSS - article タグ

基本的な使い方

article タグは、それだけでコンテンツが完結するひとつのセクションを表します。例えば、ニュースの記事、ブログのエントリ、フォーラムでの投稿など、独立した内容に対して使用します。article タグの基本的な書き方は、以下のようになります。

<article>
    <h1> コンテンツのタイトル </h1>
    <p> ... </p>
</article>
article タグの基本的な書き方

HTML5 ではセクショニング・コンテンツ要素を用いて文書構造を組み立てます。セクショニング・コンテンツ要素とは navarticlesectionaside を指します。それらの要素で文書構造を組み立てると、以下のような形になります。

HTML のセクショニング
セクショニングの例
nav
nav タグは、ナビゲーションリンクを含むセクションです。例えば、グローバルナビゲーション、パンくずリスト、目次などで用いられます。
article
article タグは、それだけでコンテンツが完結するひとつのセクションを表します。例えば、ニュースの記事、ブログのエントリ、フォーラムでの投稿など独立した内容に対して使用します。
section
section タグは、汎用的なセクションとして用いられます。このセクションの中には、必ず見出しタグが必要になります。
aside
aside タグは、本文とは独立した補足的な情報を含むセクションです。例えば、メインとなるコンテンツの補足、脚注、用語説明などです。広告もこのタグに含まれます。

使用上の注意

article タグ内には、見出しタグ(h1h6)を含めるべきです。見出しタグを含めることで、明確なコンテンツとして識別できるようになります。

<article> 
    <h1> コンテンツのタイトル </h1>
    <p> ... </p>
</article>
article タグには見出しタグを含める

コンテンツの発行日時を示す

article タグ内に time タグを含めることにより、コンテンツの発行日時を示すことができます。

<article> 
    <h1> コンテンツのタイトル </h1>
    <p>
        <time datetime="2021-06-24"> 2021/06/24 </time>
    </p>
</article>
article タグ内にコンテンツの発行日時を含める

ページ内で複数回の使用が可能

article タグは、ページの中で複数回使っても問題ありません。

<article>
    <h1> コンテンツのタイトル1 </h1>
</article>
<article>
    <h1> コンテンツのタイトル2 </h1>
</article>
article タグはページ内で複数回の使用が可能

コンテンツ内で複数のテーマを扱う場合

article タグ内で、複数のテーマを扱う場合は、テーマ毎に section タグで分割します。

<article>
    <h1> コンテンツのタイトル </h1>    
    <section>
        <h2> テーマ1 </h2>
    </section>
    <section>
        <h2> テーマ2 </h2>
    </section>
</article>
コンテンツ内で複数のテーマを扱う場合は section タグで分割する

外部リンク