HTML & CSS - article タグ

基本的な使い方

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

<article>
    <h1> コンテンツのタイトル </h1>
    <p> ... </p>
</article>

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

nav

nav タグは、ナビゲーションリンクを含むセクションです。例えば、グローバルナビゲーション、パンくずリスト、目次などで用いられます。

article

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

section

section タグは、汎用的なセクションとして用いられます。このセクションの中には、必ず見出しタグが必要になります。

aside

aside タグは、本文とは独立した補足的な情報を含むセクションです。例えば、メインとなるコンテンツの補足、脚注、用語説明などです。広告もこのタグに含まれます。

使用上の注意

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

<article> 
    <h1> コンテンツのタイトル </h1>
    <p> ... </p>
</article>

<article> 
    <h1> コンテンツのタイトル </h1>
    <p>
        <time datetime="2021-06-24"> 2021/06/24 </time>
    </p>
</article>

<article>
    <h1> コンテンツのタイトル１ </h1>
</article>
<article>
    <h1> コンテンツのタイトル２ </h1>
</article>

<article>
    <h1> コンテンツのタイトル </h1>    
    <section>
        <h2> テーマ１ </h2>
    </section>
    <section>
        <h2> テーマ２ </h2>
    </section>
</article>

外部リンク