article要素

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

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

要点

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

自己完結する記事とは

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

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

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

サンプルコード

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

サンプル

1つの記事セクション

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

見出しA

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

3つの記事セクション

HTMLソースコード
<article>
	<h1>見出しA</h1>
	<p>1つ目の記事セクション。</p>
</article> 
<article>
	<h1>見出しB</h1>
	<p>2つ目の記事セクション。</p>
</article> 
<article>
	<h1>見出しC</h1>
	<p>3つ目の記事セクション。</p>
</article> 
実際の表示

見出しA

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

見出しB

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

見出しC

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

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

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要素。

...

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

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要素。

...

2階層の入れ子

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

HTMLソースコード
<article>
	<h1>見出しA</h1>
	<p>article要素。</p>
	<article>
		<h2>見出しA-A</h2>
		<p>article要素の中の1つ目の記事セクション。</p>
	</article> 
	<article>
		<h2>見出しA-B</h2>
		<p>article要素の中の2つ目の記事セクション。</p>
	</article> 
	<article>
		<h2>見出しA-C</h2>
		<p>article要素の中の3つ目の記事セクション。</p>
	</article> 
</article> 
実際の表示

見出しA

article要素。

見出しA-A

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

見出しA-B

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

見出しA-C

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

3階層の入れ子

HTMLソースコード
<article>
	<h1>見出しA</h1>
	<p>1つ目の記事セクション。</p>
	<article>
		<h2>見出しA-A</h2>
		<p>1つ目の記事セクションの中の1つ目の記事セクション。</p>
		<article>
			<h3>見出しA-A-A</h3>
			<p>1つ目の記事セクションの中の1つ目の記事セクションの中の1つ目の記事セクション。</p>
		</article> 
		<article>
			<h3>見出しA-A-B</h3>
			<p>1つ目の記事セクションの中の1つ目の記事セクションの中の2つ目の記事セクション。</p>
		</article> 
	</article> 
	<article>
		<h2>見出しA-B</h2>
		<p>1つ目の記事セクションの中の2つ目の記事セクション。</p>
	</article> 
	<article>
		<h2>見出しA-C</h2>
		<p>1つ目の記事セクションの中の3つ目の記事セクション。</p>
	</article> 
</article> 
<article>
	<h1>見出しB</h1>
	<p>2つ目の記事セクション。</p>
</article> 
実際の表示

見出しA

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

見出しA-A

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

見出しA-A-A

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

見出しA-A-B

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

見出しA-B

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

見出しA-C

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

見出しB

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