<article>タグの解説
<article>は、ウェブページの中でそれ自体が独立した内容であることを表します。ソースコード全体に書かれた文字列の中から、「独立した意味のある記事」であると明示したい範囲に対して使用します。
例えば、ブログ記事やニュース記事のように、ひとつのテーマについて書かれた文章に対して使うことが考えられます。記事本文は、文章を単体で切り出しても意味が成立する内容であるため、<article>で囲うのに適しています。逆に、文章全体の中の章や節のような、そこだけ切り出した時に前後の文脈が読み取れなくなってしまう部分には適用できません。
<article>を使う場合は、ドキュメント全体の構造を意識してマークアップする必要があります。ブログの記事ページであれば構造は単純かも知れませんが、ポータルサイトのトップページや、ウェブマガジンのようにひとつのページで複数の話題を取り上げるようなページの場合、文章の意味的構造は複雑さを増します。
人間は、フォントの大きさや色使い、枠線やマージンの取り方などの「見た目」で情報の付加価値を判断することができます。そして、書かれた内容を読み進めて行くことで、話題が変わったことを理解する能力も持っています。しかし、コンピューターは書かれている文字列を同等の「データ」として扱います。そのため、制作者自身が文章の構造をHTMLを用いてマークアップしなければならないのです。
<article>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- この要素はセクショニング・コンテンツなので、文章構造のアウトラインに影響を与えます。
- 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
- 同一のページ内に複数使うことができます。この要素自体を入れ子にする構造も許可されています。
- 原則として見出しを含むことを想定しています。必ず子要素に
<h1>を設置しましょう。 <article>を親要素に持つ<article>の内容は、原則として関連する情報であることが求められます。その場合でも、当然<article>は「独立した内容」を明示しているはずなので、仮にその<article>を切り出しても、親子ともに意味が成立する構造でなければなりません。
<article>要素に指定できる属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<article>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。ブログやニュースの記事ページのように、ひとつの話題しか扱わない文章の場合は、<article>の運用に困ることは無いはずです。
<article>
<h1>文章のタイトル</h1>
<p>この文章の段落。この文章の段落。</p>
<p>この文章の段落。この文章の段落。</p>
<p>この文章の段落。この文章の段落。</p>
</article>
ある程度の長さを持つ文章の場合、必要な箇所に見出しを置くことで、アウトラインが明確になります。
<article>
<h1>文章のタイトル</h1>
<p>序章、概要、キャッチフレーズ。</p>
<h2>章の見出し</h2>
<p>この章の内容が書かれた段落。</p>
<p>この章の内容が書かれた段落。</p>
<h2>章の見出し</h2>
<p>この章の内容が書かれた段落。</p>
<p>この章の内容が書かれた段落。</p>
</article>
記事の中のセクショニング
次はもう少し複雑な例です。ひとつの文章の中に章や節が存在する場合には、<article>の中を複数のセクションで区切って明確な構造を与えることができます。小説や論文など、ひとつの話題に長文を要する場合に適しています。
<article>
<h1>文章のタイトル</h1>
<p>序章、概要、キャッチフレーズ。</p>
<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>をそれぞれ切り出しても単体の意味として成り立つことです。
<article>
<h1>今週の天気予報</h1>
<p>関東地方の天気予報をお伝えします。</p>
<article>
<h2>3月6日（月）東京</h2>
<p>晴れ／降水確率10%</p>
</article>
<article>
<h2>3月7日（火）東京</h2>
<p>曇りのち晴れ／降水確率20%</p>
</article>
<article>
<h2>3月8日（水）東京</h2>
<p>曇り／降水確率40%</p>
</article>
</article>
記事の中にヘッダーとフッターを与える
<article>はひとつの独立した記事であるため、範囲の中にヘッダーとフッターを内包できます。仮にサイト全体のグローバル・ヘッダーや、最下部のフッターがあったとしてもあったとしても、<article>で囲われた範囲は固有の意味を持つため、始まりと終わりを持たせても問題ありません。
<article>
<header>
<h1>文章のタイトル</h1>
<nav>
<h2>コンテンツの目次</h2>
<ul>
<li><a href="#1">#1</a></li>
<li><a href="#2">#2</a></li>
<li><a href="#3">#3</a></li>
</ul>
</nav>
</header>
<h2 id="#1">コンテンツの見出し</h2>
<p>この文章の段落。この文章の段落。</p>
<h2 id="#2">コンテンツの見出し</h2>
<p>この文章の段落。この文章の段落。</p>
<h2 id="#3">コンテンツの見出し</h2>
<p>この文章の段落。この文章の段落。</p>
<footer>
<small>出典：この文書の原典や著者</small>
</footer>
</article>
<article>と<section>の使い分け方
<article>と<section>はどちらが上か下かという関係性ではなく、文書全体の文脈を考慮した上で使い分けるものです。以下の内容はその一例です。文章全体の文脈が正しければ、<article>と<section>の親子関係を逆にすることも可能です。
<main>
<header>
<h1>文章のタイトル</h1>
<p>序章、概要、キャッチフレーズ。</p>
</header>
<section>
<h2>コンテンツＡ</h2>
<p>コンテンツの概要。</p>
<a href="page-a">リンク先へ移動する</a>
</section>
<section>
<h2>コンテンツＢ</h2>
<p>コンテンツの概要。</p>
<a href="page-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>
また、複数のユーザーが意見を交わすようなページの場合、それが文章の切れ端だったとしても、コメントとして固有の意味を持つまとまりであれば、構造上<article>で囲うことも許可されます。
<main>
<article>
<h1>ブログ記事のタイトル</h1>
<section>
<h2>記事の見出し</h2>
<p>記事の内容。</p>
</section>
<section>
<h2>記事の見出し</h2>
<p>記事の内容。</p>
</section>
<section>
<h2>読者のコメント</h2>
<article>
<h3>名無しさん</h3>
<p>コメントの内容。</p>
</article>
<article>
<h3>名無しさん</h3>
<q>“記事のの引用”</q>
<p>コメントの内容。</p>
</article>
<article>
<h3>名無しさん</h3>
<q> >>他者のコメントの引用</q>
<p>コメントへの返信。</p>
</article>
</section>
</article>
</main>
セクショニング・コンテンツとアウトライン
HTML5から追加された、<article>、<section>、<aside>、<nav>は、セクショニング・コンテンツという部類に属しています。これらは、ドキュメントに明示的なアウトラインを与える非常に重要な役目を担っています。
HTML Living Standardになり、アウトラインの作成は見出し要素が行うことに統一されました。つまり、<article>や<section>要素を細かく切り分けなくても、<h1>〜<h6>が正しい順序で配置されていれば、ブラウザは問題なく文章の格付けを把握してくれます。
しかし、これらの要素が不要になったわけではありません。特に複雑になったサイトをコンポーネントで切り分けて開発・運用するような現場では、要素の階層やスタイルの適用範囲の管理が重要になります。
<article>や<section>を使うと、どこからどこまでがひとつのまとまりであるかが明確になります。ソースコード上でも一目で分かるようになるため、複数の開発者が関わる状況でも役立ちます。
しかし、厳密なセクショニングは過剰な入れ子構造を生み出しやすいので、サイト規模や開発環境、更新のしやすさなどのバランスを取ってマークアップしていきましょう。