記事要素（article）の仕様と使い方

カテゴリ：HTML5編

article要素の概要

article要素は主にWebシンジケーションなどで独立して配布が可能な記事部分を表す要素です。
完全な形の記事を表すため、記事の一部のみを囲むのではなく記事全体を囲む必要があります。
つまり記事としてarticle要素が他のサイトに抜粋されても完全な記事を読むことができるように囲む必要があります。
1つのページに複数の記事を表示する場合には1記事の括りとしての意味もあります。

一般的な構成例

ページの記事部分全体をarticle要素で囲みます。

典型的なHTML5要素の構成例）

<body>
    <header>
        ページヘッダー（サイトタイトル、メニューなど）
        <nav>
            サイトメニュー
            <ul>
                <li>リンク</li>
                <li>リンク</li>
                <li>リンク</li>
            </ul>
        </nav>
    </header>
    <main>
        記事などのメインコンテンツ
        <article>
            記事本文
        </article>
    </main>
    <aside>
        サイドバーなどのメイン以外のコンテンツ
    </aside>
    <footer>
        ページフッター（メニュー、コピーライトなど）
    </footer>
</body>

1つのarticle要素内にsection要素を使用して複数のセクションに分割することが可能です。

article要素内に複数のsection要素を配置した例）

    <main>
        <article>
            <section>
                <h2>セクション1</h2>
                本文
            </section>
            <section>
                <h2>セクション2</h2>
                本文
            </section>
        </article>
    </main>
</body>

1つのページに複数の異なる記事が存在する場合にarticle要素を複数配置することや、関連する記事であればarticle要素を入れ子にする事も可能です。

複数のarticle要素を配置した例）

    <main>
        <article>
            記事1
        </article>
        <article>
            記事2
        </article>
        <article>
            記事3
        </article>
    </main>
</body>

入れ子にする場合は親article要素と子article要素は関連する記事（訪問者のコメントなど）でなければなりません。

article要素を入れ子にした例）

    <main>
        <article>
            記事1
            <article>
                記事1に対するコメント
            </article>
        </article>
        <article>
            記事2
            <article>
                記事2に対するコメント
            </article>
        </article>
    </main>
</body>

article要素の利点

1つのarticle要素が1つの記事を表すため、Webシンジケーション（Atom Syndication Formatのようなもの）で記事単位で切り取ったり、1つのページに複数のWebサイトの記事を並べて表示したりなど、記事を再利用しやすくなるというメリットがあります。
また、article要素を入れ子にしてコメントを格納することで、記事ごとのコメントをまとめて取得したり、再利用がしやすくなります。

Webシンジケーションとは：
Webシンジケーションは他のウェブサイトの更新情報や最新コンテンツなどの配信を行う事を指し、例えばAtom Syndication Formatではentry要素に抜き出した記事を格納します。（仕様はRFC 4287で定義されている）
HTML5のarticle要素も同様に、JavaScriptなどを使用してWebページ中に他のサイトの最新の記事などを抜き出す際に使用することを想定したものです。

W3Cによるarticle要素の説明

article要素は、原則として、例えばシンジケーションのように独立して配布可能または再利用可能な文書、ページ、アプリケーション、またはサイト内の自己完結型の構成を表します。これは、フォーラムの投稿、雑誌や新聞の記事、ブログのエントリ、ユーザーが投稿したコメント、インタラクティブなウィジェットやガジェット、またはその他の独立したコンテンツのアイテムです。

article要素がネストされている場合、内側のarticle要素は原則として外側のarticleの内容に関連しているarticleを表します。たとえば、ユーザーが投稿したコメントを受け入れるサイト上のブログエントリは、ブログエントリのarticle要素内にネストされたarticle要素としてコメントを表すことができます。

article要素（q.v. address要素）に関連付けられている作成者情報は、ネストしたarticle要素には適用されません。

公開日時：2019年06月09日 10:08:38