目次に戻る

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

概要

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

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

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

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

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

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

W3C : HTML5.3:それぞれのarticle要素は、当該article要素として見出しh1-h6要素)を含むことによって一般に識別されるべきであるとされていた。

W3C : HTML5.3:主要部分をarticle要素でくくることが冗長である旨の明記はなかった。

私見・補足

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

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

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

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

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

個人的には、独立したコンテンツたりうるという点ではfigure要素と同等かそれ以上なのに、article要素Sectioning rootでないのが不思議だ。

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>最新2記事</h2>
          <article>
            <h3>記事1</h3>
              <section>
                <h4>これこれについて</h4>
                <p>文章</p>
              </section>
              <section>
                <h4>それに対してあれについて</h4>
                <p>文章</p>
              </section>
          </article>
          <article>
            <h3>記事2</h3>
              <section>
                <h4>これこれについて</h4>
                <p>文章</p>
              </section>
              <section>
                <h4>それに対してあれについて</h4>
                <p>文章</p>
              </section>
          </article>
      </section>
      <section>
        <h2>人気2記事</h2>
          <article>
            <h3>記事3</h3>
              <section>
                <h4>これこれについて</h4>
                <p>文章</p>
              </section>
              <section>
                <h4>それに対してあれについて</h4>
                <p>文章</p>
              </section>
          </article>
          <article>
            <h3>記事4</h3>
              <section>
                <h4>これこれについて</h4>
                <p>文章</p>
              </section>
              <section>
                <h4>それに対してあれについて</h4>
                <p>文章</p>
              </section>
          </article>
      </section>
    </body>
    
  • 「最新2記事」「人気2記事」というウェブページを別個に作成することはないだろうから、これらのセクションは、section要素
  • ブログなら「記事1」「記事2」「記事3」「記事4」についてそれぞれ個別のウェブページを生成するだろうから、これらのセクションarticle要素
  • 長い記事なら、記事内でさらにセクション分けがありうる。これらのセクションは記事の構成部分であって、独立しえないから、section要素
  • 作成者の主観による部分もあるので、ウェブサイトごとにブレは生じるだろう。ブログや掲示板のウェブサイトなどでは一般的な慣例が成立しているようにも思われるので、それに従うのもよいかと思われる。