備忘録的プログラミングリファレンス

<article> エレメント

 <article> エレメントは、ブロックレベルエレメントで複数のエレメントをグループ化します。1ページとしてのまとまりという意味があります。
 <article> エレメントで囲まれた内容は意味が完結しているという前提があり、ページとして完結しているという意味があります。 そのために、<article> エレメントで囲まれた部分は1ページの内容という意味を持ちます。
 このエレメントによって複数のページを1ページに収める、ページの中にページを作るという方法ができます。

 以下は簡単な例ですが、<article> エレメントで<main><aside>を包括しています。

<article>例

 <article> エレメントは、<header><footer><main><aside><section><div>エレメントを包括することができます。
 さらに、<header><footer><main><aside><section><div>エレメントを親エレメントにもできます。

 似たエレメントに<section>があります。このエレメントは<main><aside>内で使うのが便利です。

 ブロックレベル要素でグループ化することができるエレメントの代表的なものに<div>があります。 <article> エレメントは必ず使わなければならないわけではありません。よく分からない場合は、<div>で包括していく方法もあります。

複数ページ(カテゴリー)を1ページで表現

 複数ページおいては<h1>エレメントを複数おきたくなります。しかし、<h1>エレメントは1ページに1つです。

 検索エンジンでは、例え<h1>エレメントが複数存在しても内容を解釈はしてくれます。そこで<article> エレメントを使います。

Example

ページのなかのページ

 ページの中にページを置きたい場合があります。そのためには、<article> エレメントで内容を包括したほうがよいでしょう。

Example