概要
- 配置できる場所
-
- 上記カテゴリーの要素が置ける場所。
- 内容モデル
- 属性
-
- グローバル属性
- HTML構文におけるタグの省略
-
- 省略不可。
- WAI-ARIA
- 視覚系ブラウザのデフォルトとして期待される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>最新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
要素。 - 作成者の主観による部分もあるので、ウェブサイトごとにブレは生じるだろう。ブログや掲示板のウェブサイトなどでは一般的な慣例が成立しているようにも思われるので、それに従うのもよいかと思われる。