<article>要素(独立した記事セクション)。

HTML 5 に於ける、独立した記事セクションである<article>要素について解説します。

<article>要素の概要。

HTML 5 に於ける<article>要素は、独立した記事セクションとして定義されております。

  • HTML 4/XHTML 1には該当する要素はありません。

<article>要素の定義。

カテゴリ
要素が置ける箇所
フロウ内容要素が置ける箇所。
要素の内容モデル
要素で定義された属性
グローバル属性のみ定義されております。

<article>要素の詳細。

HTML 5 に於ける<article>要素は、独立した記事セクションです。

独立した記事と言うと、分かり難いかも知れませんが、以下のようにすれば良いでしょう。

  • ウェブログや日記サイトなどでは一つ一つのエントリが<article>要素に該当するでしょう。
    • また、各エントリでの閲覧者からのコメント投稿も一つの<article>要素と見る事が出来るとしております。
  • ニュースサイトでは、ニュースの記事一つ一つが<article>要素に該当するでしょう。
    • 各記事に付随する子記事もまた、一つの<article>要素となるでしょう。
  • 一般のウェブサイトの場合は、一つの文書に異なった記事を複数押し込める事は稀でしょうから、通常は本文全体が一つの<article>要素となる筈です。
    • 但し、本文の前後に加えられる、文書外へのナヴィゲーションは本文の外にあるものと考えるべき、<article>要素の外にあるべきでしょう。

また、他のセクショニング内容要素と違い、<article>要素は当該要素内に記述された当該記事の発行日時を所定のマークアップを行う事で、セマンティックに発行日時の情報を与える事が可能になります(後述)。

尚、HTML 5 の仕様でセクションと見出しの関係に言及しておりますが、<article>要素には性格上、内容として常に見出しを伴う筈であると言えましょう。

<article>要素の例。

ウェブログ, 日記サイトなどの場合
<article id="MONTH_DATE_2011">
    <header>
        <h1>堀北真希ちゃんが○○に挑戦だって…</h1>
        <p class="published_date"><time pubdate="pubdate" datetime="2011-**-**T**-**-**+09:00">平成23年**月**日 **時**分**秒</time></p>
        </header>

    (記事本文)

    <article class="feedback">
        <header>
            <h2>○○さんからのコメント</h2>
            <p class="posted_date"><time pubdate="pubdate" datetime="2011-**-**T**-**-**+09:00">平成23年**月**日 **時**分**秒</time></p>
            </header>
        (コメント本文)
        </article>

    <article class="feedback">
        <header>
            <h2>△△さんからのコメント</h2>
            <p class="posted_date"><time pubdate="pubdate" datetime="2011-**-**T**-**-**+09:00">平成23年**月**日 **時**分**秒</time></p>
            </header>
        (コメント本文)
        </article>
    …
    </article>

エントリに対する閲覧者からの投稿も<article>要素であるとしており、従って<article>要素が入れ子となっております。

ニュースサイトなどの場合
<article>
    <header>
        <h1>堀北真希、○○に挑戦！</h1>
        <p class="published_date"><time pubdate="pubdate" datetime="2011-**-**T**-**-**+09:00">平成23年**月**日 **時**分**秒</time></p>
        </header>
    <p>女優の堀北真希(22)が××テレビ系で平成23年△月に放送開始予定のドラマ<cite class="TV program">□□□□</cite>で○○に初挑戦する事が明らかとなった。</p>
    …

    <article>
        <header>
            <h2><q>頑張ります</q> − 堀北真希、抱負を語る</h2>
            <p class="published_date"><time pubdate="pubdate" datetime="2011-**-**T**-**-**+09:00">平成23年**月**日 **時**分**秒</time></p>
            </header>
        <p>××テレビ系で平成23年△月に放送開始予定のドラマ<cite class="TV program">□□□□</cite>で○○に初挑戦する事となった堀北真希(22)は、■日にさいたま市内で記者会見を開き、<q>頑張ります</q>と抱負を述べた。</p>
        …
        </article>
    …
    </article>

記事の中に子記事が入っており、このため<article>要素が入れ子となっております。

一般のサイトの場合(一例)
<body>
    <header>
        <nav>
            (文書冒頭のナヴィゲーション)
            </nav>
        </header>

    <!-- 本文開始 -->
    <article>
        <h1>堀北真希ちゃんについて♡</h1>
        <p>堀北真希ちゃんは…(以下略)</p>
        …
        </article>
        <!-- 本文ここまで -->

    <footer>
        (文書のフッタ：文書下部のナヴィゲーションやクレジットなど)
        </footer>
    </body>

一般のサイトであれば、ヘッダとフッタの部分を覗いた本文部分を単一の<article>要素とすれば良いでしょう。

注意事項。

記事の公開日時について。

記事の公開日時については、当該<article>要素内にある公開日時を表すテキストを、pubdate 属性値を伴う<time>要素としてマークアップする事で、関連付けが可能になります。

例えば、以下の<article>要素は、日本時間の平成23年 6月10日22時34分51秒に公開されたものと認識出来ます。

<article>
    …
    … <time pubdate="pubdate" datetime="2011-06-10T22:34:51+09:00">平成23年 6月10日22時34分51秒</time> 公開 …
    …
    </article>

当たり前ですが、この日時については同一セクション内に複数存在してはいけません。

また、<article>要素が入れ子となっている場合は、<time>要素で与えられる情報は、最も内側にある<article>要素の発行日時と見なします。

<article>要素の内容のマークアップについて。

  • この節には、制作者の私見が入ります。

<article>要素のマークアップとしては、フロウ内容要素であれば良い事になっております。

HTML 5 では、かつてインライン要素と呼ばれたテキストレヴェルの要素はフロウ内容要素の一種であるフレージング内容要素としているため、<article>要素直下に生テキストなどを直接書いても問題はない事になります。

ただ、HTML 5 より前の世代のユーザエージェントの場合、<article>要素をブロックとして認識出来ないため、おかしな結果になる事も予想出来ます。

このため、<article>要素の内容は出来る限り従来のブロックレヴェル要素、すなわち、

などにする事を強くお勧めします。

HTML 4/XHTML 1との違い。

<article>要素は HTML 4/XHTML 1にはありません。

関連項目。

<aside>要素
本文から外れたセクション
<footer>要素
文書またはセクションのフッタ
<header>要素
文書またはセクションのヘッダ
<section>要素
一般的なセクション
<time>要素
日付, 時刻或いは日時