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

取り扱い 現行の標準
カテゴリ フロー・コンテンツ
セクショニング・コンテンツ
パルパブル・コンテンツ
親にできる要素 フロー・コンテンツを受け入れる要素
子にできる要素 フロー・コンテンツ
対応ブラウザ caniuseで確認

<article>タグの説明

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

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

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

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

<article>タグの特徴

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • この要素はセクショニング・コンテンツなので、文章構造のアウトラインに影響を与えます。
  • 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
  • 同一のページ内に複数使うことができます。この要素自体を入れ子にする構造も許可されています。
  • 原則として見出しを含むことを想定しています。必ず子要素に<h1>を設置しましょう。
  • <article>を親要素に持つ<article>の内容は、原則として関連する情報であることが求められます。その場合でも、当然<article>は「独立した内容」を明示しているはずなので、仮にその<article>を切り出しても、親子ともに意味が成立する構造でなければなりません。

<article>に指定できる主な属性

グローバル属性
全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
イベントハンドラ
全てのHTML要素に指定できるコンテンツ属性です。

<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>

<article>自体を入れ子にした構造も考えられます。ここで注目して欲しいのは、各<article>をそれぞれ切り出しても単体の意味として成り立つことです。

HTML
<article>
	<h1>今週の天気予報</h1>
	<p>関東地方の天気予報をお伝えします。</p>

	<article>
		<h1>3月6日(月)</h1>
		<p>晴れ/降水確率10%</p>
	</article>

	<article>
		<h1>3月7日(火)</h1>
		<p>曇りのち晴れ/降水確率20%</p>
	</article>

	<article>
		<h1>3月8日(水)</h1>
		<p>曇り/降水確率40%</p>
	</article>
</article>

もっと複雑な例を見てみましょう。ここでは<article><section>の親子関係が逆になっている点に注目して下さい。

HTML
<main>
	<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>
</main>

セクショニング・コンテンツとアウトライン

HTML5から追加された、<article><section><aside><nav>は、セクショニング・コンテンツという部類に属しています。これらは、ドキュメントに明示的なアウトラインを与える非常に重要な役目を担っています。

文章のアウトラインをセクショニング・コンテンツによって明示できるようになったため、見出し(<h1><h6>)の指し示す対象が、どこからどこまでなのか明確に区別できるようになりました。

今まで<h1>要素をページ内に一つしか記述できなかったのは、単にアウトラインを明示するタグが未熟だったためです。HTML5になって文章を構造化する役割りを担うタグが追加されたことによって、見出しは見出しとしての振る舞いをすれば良くなりました。

セクショニング・コンテンツを的確に導入した場合、各セクションの見出しは<h1>だけで完結します。文章のアウトラインはセクショニングコンテンツによって定義されるため、見出しの格付け自体が冗長となります。

ただし、各ブラウザのベンダーによって解釈や実装状況が異なるため、確実に標準化されるまでは<h1><h6>を使い分けた方が良さそうです。

<article>に関連するHTMLタグ

文書の構造を組み立てる要素
<article> 自己完結した記事であることを示す
<section> 文書構造におけるセクションを定義する
<aside> 本筋から分離しても問題のない余談や補足を表す
<nav> ページ上の主要なナビゲーションであることを表す
<header> セクションの先頭となるグループを表す
<footer> セクションのフッターを表す
<h1> 〜 <h6> 文書やセクションの見出しを表す
<p> 文章の段落を指定する