ウェブランサー

<article> 自己完結した記事であることを表す

取り扱い HTML5から追加された要素
カテゴリ フロー・コンテント
セクショニング・コンテント
パルパブル・コンテント
親にできる要素 フロー・コンテンツが期待される場所
子にできる要素 フロー・コンテンツ
対応ブラウザ <article>の対応状況を確認する

<article>タグの説明

<article>は、ウェブページの中でそれ自体が独立した内容の記事であることを表します。ウェブページに書かれた文章の中から、「独立した意味のある記事」であると明示できる範囲に対して使用します。

例えば、ブログ記事やニュース記事のように、一つのテーマについて書かれた文章に対して使うことが考えられます。記事本文は、文章を単体で切り出しても意味が成立する内容であるため、<article>で囲うのに適しています。逆に、文章全体の中の「章」や「節」のような、そこだけ切り出した時に前後の文脈が読み取れなくなってしまう部分には適用できません。

<article>を使う場合は、ドキュメント全体の構造を意識してマークアップする必要があります。ブログの記事ページであれば構造は単純かも知れませんが、ポータルサイトのトップページや、ウェブマガジンのように一つのページで複数の話題を取り上げるようなページの場合、文章の意味的構造は複雑さを増します。

人間は、フォントの大きさや色使い、枠線やマージンの取り方などの「見た目」で情報の付加価値を判断することができます。そして、書かれた内容を読み進めて行くことで、話題が変わったことを理解する能力も持っています。しかし、コンピューターは書かれている文字列を「データ」として同等に扱うことしかできません。そのため、制作者自身が文章構造をHTMLを用いてマークアップしなければならないのです。

<article>タグの特徴

<article>はページ内に複数使うことができます。この要素自体を入れ子構造にすることもできます。

<article>を親要素に持つ<article>の内容は、原則として関連する情報であることが求められます。その場合でも、当然<article>は「独立した内容」を明示しているはずなので、仮にその<article>を切り出しても、親子ともに意味が成立する構造でなければなりません。

この要素はセクショニングコンテントなので、文章構造のアウトラインに影響を与えます。原則として見出しを含むことを想定しているので、必ず子要素に<h1>(〜 <h6>)を記述するようにしましょう。

<article>タグに指定できる属性

グローバル属性
基本的に全てのHTML要素に共通で指定できる属性です。
イベントハンドラ
基本的に全てのHTML要素に指定することができるコンテンツ属性です。

<article>タグの使い方とサンプル

<article>を使ったマークアップで、最もシンプルな記述は以下のような構造になります。ブログ記事やニュース記事のように、単純な構造しか持たない文章の場合は、<article>の運用に困ることは無いでしょう。

HTML
<article>
	<h1>文章のタイトル</h1>
	<p>この文章の段落。この文章の段落。</p>
	<p>この文章の段落。この文章の段落。</p>
	<p>この文章の段落。この文章の段落。</p>
</article>

次はもう少し複雑な例です。一つの文章の中に章や節が存在する場合には、<article>の中を複数のセクションで区切ることによって、明確な構造を与えることができます。

HTML
<article>
	<h1>この文章のタイトル</h1>

	<section>
		<h2>第一章の見出し</h2>
		<section>
			<h3>節の小見出し</h3>
			<p>文章の内容。文章の内容。文章の内容。</p>
			<p>文章の内容。文章の内容。文章の内容。</p>
		</section>
		<section>
			<h3>節の小見出し</h3>
			<p>文章の内容。文章の内容。文章の内容。</p>
			<p>文章の内容。文章の内容。文章の内容。</p>
		</section>
	</section>

	<section>
		<h2>第二章の見出し</h2>
		<section>
			<h3>節の小見出し</h3>
			<p>文章の内容。文章の内容。文章の内容。</p>
			<p>文章の内容。文章の内容。文章の内容。</p>
		</section>
		<section>
			<h3>節の小見出し</h3>
			<p>文章の内容。文章の内容。文章の内容。</p>
			<p>文章の内容。文章の内容。文章の内容。</p>
		</section>
	</section>
</article>

HTML5における<article>と<section>の使い分け方

HTMLで文章構造を定義する際に、<article>と<section>をどのように使い分けたら良いのか分からない、という問題が発生することがあります。

「文章のアウトラインを理解しよう」という説明を読んでも抽象的な表現が多く、容易に理解できるものではありませんし、これから作ろうとしているドキュメントに対して、具体的にどのように当てはめて良いのか分かりづらいと思います。

<article>と<section>の二つを使い分けるコツは、まず必要以上に複雑な構造のドキュメントを作らないこと。そして、作り始める前から文章の構造を意識して、ページの中の役割り分担を決めておくことです。

一つの例として、<section>の子要素に<article>を使用するケースを紹介します。このサンプルでは、ページ内に「お知らせ」という独立した意味を持つ文章をまとめたコーナーが設置されています。この場合、以下のようなマークアップにすることで、文章の構造を明示することができます。

HTML
<body>
	<header>
		<h1>サイトのタイトル</h1>
		<p>説明文やアイキャッチなどの要素。</p>
	</header>

	<section>
		<h2>サイトのコンテンツA</h2>
		<p>コンテンツの説明。</p>
		<a href="contents_a">リンク先へ移動する</a>
	</section>

	<section>
		<h2>サイトのコンテンツB</h2>
		<p>コンテンツの説明。</p>
		<a href="contents_b">リンク先へ移動する</a>
	</section>

	<section>
		<h2>お知らせコーナー</h2>
		<article>
			<h3>今週のお知らせ</h3>
			<p>お知らせの内容。独立した告知内容。</p>
		</article>
		<article>
			<h3>先週のお知らせ</h3>
			<p>お知らせの内容。独立した告知内容。</p>
		</article>
		<article>
			<h3>先々週のお知らせ</h3>
			<p>お知らせの内容。独立した告知内容。</p>
		</article>
	</section>

	<footer>
		フッターの内容
	</footer>
</body>

<article>に関連するHTMLタグ

セクション要素
<address> 連絡先(問い合わせ先)として扱う
<article> 自己完結した記事であることを示す
<aside> 本筋から分離しても問題のない余談や補足を表す
<body> ページ本体の表示領域
<footer> セクションのフッターを表す
<h1> 〜 <h6> 見出しを指定する
<header> セクションの先頭となるグループを表す
<hgroup> 見出しをグループ化してセクションのヘッダを表す
<nav> ページ上の主要なナビゲーションであることを表す
<section> ウェブページ内の文章構造におけるセクションを定義する