目次に戻る

article要素：HTML Living Standard各要素別メモ

概要

カテゴリー
配置できる場所
内容モデル
属性
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • デフォルトroleは、article。デフォルトroleをrole属性値に指定することは、推奨されない。
  • デフォルトrole以外では、feed、document、application、main、region、presentation、noneを指定可。
視覚系ブラウザのデフォルトとして期待されるCSS

  article {
    display: block;
    unicode-bidi: isolate;
  }
意味・用法

HTML文書、ウェブページ、アプリケーション又はウェブサイトの中で完全もしくは自己完結した構成部分を表す。

例→雑誌・新聞・ブログの記事、掲示板等での投稿・コメント、操作できるウィジェット。

article要素が入れ子される場合は、内側のarticle要素は、外側のarticle要素に関連している（自己完結している）コンテンツであることを表す。

HTML文書の主要部分をarticle要素でくくることはできるが、それは技術的に冗長である。

私見・補足

section要素との使い分けは、その部分だけを単独で配信する（その部分をメインとするウェブページを別個に作成する）ことがありうるかどうかが一応の判断基準。

複数の記事が並ぶようなウェブページを作成するのでなければ、全く用がない要素と思われる。

そのウェブページに、article要素で囲むべき記事等が一つしかないのなら、そもそもarticle要素を使うこと自体が冗長であり、不要である。その一つだけの記事等は、要するにHTML文書の主要部分であるのだから、main要素で囲めば充分である。

Sectioning contentなので、実際に見出しを入れるかどうかはともかく、Heading contentで見出しを入れると不自然になるようなブロックには、そもそもふさわしくない。

見出しの文言は、当該記事等の主題・テーマを表す文言。

article要素とsection要素との間に、どっちが上でなければならないという関係はない。section要素→article要素→section要素という入れ子関係もありうるし、article要素→section要素→article要素という入れ子関係もありうる。単独で配信されうるセクションはaricle要素で、そうでないセクションはsection要素だというだけの話（「使い分け例」を参照）。

使い分け例

    <body>
    <h1>○○ブログトップページ</h1>
      <nav>
        <h2>ブログ案内</h2>
        <a href="example1.html">記事一覧</a>
        <a href="example2.html">ブログ検索</a>
      </nav>
      <section>
        <h2>最新２記事</h2>
          <article>
            <h3>記事１</h3>
              <section>
                <h4>これこれについて</h4>
                <p>文章</p>
              </section>
              <section>
                <h4>それに対してあれについて</h4>
                <p>文章</p>
              </section>
          </article>
          <article>
            <h3>記事２</h3>
              <section>
                <h4>これこれについて</h4>
                <p>文章</p>
              </section>
              <section>
                <h4>それに対してあれについて</h4>
                <p>文章</p>
              </section>
          </article>
      </section>
      <section>
        <h2>人気２記事</h2>
          <article>
            <h3>記事３</h3>
              <section>
                <h4>これこれについて</h4>
                <p>文章</p>
              </section>
              <section>
                <h4>それに対してあれについて</h4>
                <p>文章</p>
              </section>
          </article>
          <article>
            <h3>記事４</h3>
              <section>
                <h4>これこれについて</h4>
                <p>文章</p>
              </section>
              <section>
                <h4>それに対してあれについて</h4>
                <p>文章</p>
              </section>
          </article>
      </section>
    </body>
  • 「最新２記事」「人気２記事」というウェブページを別個に作成することはないだろうから、これらのセクションは、section要素。
  • ブログなら「記事１」「記事２」「記事３」「記事４」についてそれぞれ個別のウェブページを生成するだろうから、これらのセクションはarticle要素。
  • 長い記事なら、記事内でさらにセクション分けがありうる。これらのセクションは記事の構成部分であって、独立しえないから、section要素。
  • 作成者の主観による部分もあるので、ウェブサイトごとにブレは生じるだろう。ブログや掲示板のウェブサイトなどでは一般的な慣例が成立しているようにも思われるので、それに従うのもよいかと思われる。