article要素

article要素は、自己完結する記事のセクションであることを示す要素。

カテゴリー フロー・コンテンツ。セクショニング・コンテンツ。パルパブル・コンテンツ。
コンテキスト フロー・コンテンツを内包できる要素内で使用できる。
コンテンツ・モデル フロー・コンテンツを内包できる。
属性 グローバル属性。
ブラウザ対応

要点

  • article要素は、自己完結する記事のセクションであることを示す要素。
  • article要素の中には、記事セクションのテーマを括った見出し要素（h1～h6要素）を用意するのが一般的だ。必須ではない。
  • article要素は、セクショニング・コンテンツである。新たなセクションを区画する。
  • article要素は、HTML5にて新たに導入された要素である。

自己完結する記事とは

自己完結する記事のセクションとは、セクションの内容だけで内容が完結するセクション。例えば、ブログにおける投稿やコメントなど。

具体例
  • ニュース記事
  • ブログの投稿
    • ブログの投稿に対するコメント
  • 掲示板の投稿
    • 掲示板の投稿に対する返事

「ブログの投稿に対するコメント」や「掲示板の投稿に対する返事」は、article要素を入れ子にすると良いだろう。

サンプルコード

<article>
	自己完結する記事のセクション。
</article>

サンプル

１つの記事セクション

HTMLソースコード
<article>
	<h1>見出しＡ</h1>
	<p>自己完結する記事のセクションである。</p>
</article>
実際の表示

見出しＡ

１つ目の記事セクション。

３つの記事セクション

HTMLソースコード
<article>
	<h1>見出しＡ</h1>
	<p>１つ目の記事セクション。</p>
</article> 
<article>
	<h1>見出しＢ</h1>
	<p>２つ目の記事セクション。</p>
</article> 
<article>
	<h1>見出しＣ</h1>
	<p>３つ目の記事セクション。</p>
</article>
実際の表示

見出しＡ

１つ目の記事セクション。

見出しＢ

２つ目の記事セクション。

見出しＣ

３つ目の記事セクション。

一般的な記事セクション１

HTMLソースコード
<article>
	<header>
		<h1>h1要素</h1>
		<p>header要素内のp要素。</p>
	</header>
	<p>p要素。</p>
	<p>p要素。</p>
	<p>...</p>
	<footer>
		<time datetime="2014-02-20">2014年2月20日</time>
	</footer>
</article>
実際の表示

h1要素

header要素内のp要素。

p要素。

p要素。

...

一般的な記事セクション２

HTMLソースコード
<article>
	<header>
		<h1>h1要素</h1>
		<p>header要素内のp要素。</p>
	</header>
	<section>
		<h2>h2要素</h2>
		<p>section要素内のp要素。</p>
		<p>...</p>
	</section>
	<section>
		<h2>h2要素</h2>
		<p>section要素内のp要素。</p>
		<p>...</p>
	</section>
	<footer>
		<time datetime="2014-02-20">2014年2月20日</time>
	</footer>
</article>
実際の表示

h1要素

header要素内のp要素。

h2要素

section要素内のp要素。

...

h2要素

section要素内のp要素。

...

２階層の入れ子

article要素の中にarticle要素を入れるサンプル。

HTMLソースコード
<article>
	<h1>見出しＡ</h1>
	<p>article要素。</p>
	<article>
		<h2>見出しＡ－Ａ</h2>
		<p>article要素の中の１つ目の記事セクション。</p>
	</article> 
	<article>
		<h2>見出しＡ－Ｂ</h2>
		<p>article要素の中の２つ目の記事セクション。</p>
	</article> 
	<article>
		<h2>見出しＡ－Ｃ</h2>
		<p>article要素の中の３つ目の記事セクション。</p>
	</article> 
</article>
実際の表示

見出しＡ

article要素。

見出しＡ－Ａ

article要素の中の１つ目の記事セクション。

見出しＡ－Ｂ

article要素の中の２つ目の記事セクション。

見出しＡ－Ｃ

article要素の中の３つ目の記事セクション。

３階層の入れ子

HTMLソースコード
<article>
	<h1>見出しＡ</h1>
	<p>１つ目の記事セクション。</p>
	<article>
		<h2>見出しＡ－Ａ</h2>
		<p>１つ目の記事セクションの中の１つ目の記事セクション。</p>
		<article>
			<h3>見出しＡ－Ａ－Ａ</h3>
			<p>１つ目の記事セクションの中の１つ目の記事セクションの中の１つ目の記事セクション。</p>
		</article> 
		<article>
			<h3>見出しＡ－Ａ－Ｂ</h3>
			<p>１つ目の記事セクションの中の１つ目の記事セクションの中の２つ目の記事セクション。</p>
		</article> 
	</article> 
	<article>
		<h2>見出しＡ－Ｂ</h2>
		<p>１つ目の記事セクションの中の２つ目の記事セクション。</p>
	</article> 
	<article>
		<h2>見出しＡ－Ｃ</h2>
		<p>１つ目の記事セクションの中の３つ目の記事セクション。</p>
	</article> 
</article> 
<article>
	<h1>見出しＢ</h1>
	<p>２つ目の記事セクション。</p>
</article>
実際の表示

見出しＡ

１つ目の記事セクション。

見出しＡ－Ａ

１つ目の記事セクションの中の１つ目の記事セクション。

見出しＡ－Ａ－Ａ

１つ目の記事セクションの中の１つ目の記事セクションの中の１つ目の記事セクション。

見出しＡ－Ａ－Ｂ

１つ目の記事セクションの中の１つ目の記事セクションの中の２つ目の記事セクション。

見出しＡ－Ｂ

１つ目の記事セクションの中の２つ目の記事セクション。

見出しＡ－Ｃ

１つ目の記事セクションの中の３つ目の記事セクション。

見出しＢ

２つ目の記事セクション。