article要素 - 自己完結するコンテンツのまとまり

2017/02/09

article要素は「自己完結するコンテンツのまとまり」を表す要素です。この要素でマークアップされたコンテンツは独立して別ページで再利用できうる内容でなければいけません。article要素の中にarticle要素がある場合、中のarticle要素は原則として、外のarticle要素に関連する内容でなければいけません。例えば、外のarticle要素がブログ記事の本文で、記事に対する各コメントをarticle要素でマークアップするという使い方ができます。

概要

名前

article (Article)

カテゴリ

Flow content

Sectioning content

Palpable content

配置できる場所

Flow contentが期待される場所。例外で、address要素の子孫にしてはいけない。

コンテンツモデル

Flow content。

タグの省略

開始タグも終了タグも省略できません。

DOM Interface

HTMLElement

デフォルトのスタイル

Chrome / Firefox / Safari

:focus {
    outline: -webkit-focus-ring-color auto 5px;
}
article {
    display: block;
}

article {
	display: block;
	unicode-bidi: isolate;
}

:focus {
	outline-color: -webkit-focus-ring-color;
	outline-style: auto;
	outline-width: 5px;
}
article {
	display: block;
}

仕様書

https://html.spec.whatwg.org/multipage/semantics.html#the-article-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

サンプルコード

マークアップ

article要素の構成は正解がありません。仮に構成が変だからといって検索エンジンから低評価を受けることはないはずなので、神経質にならないで下さい。参考までに、当サイトでは下記のようにマークアップしています。

HTML

<article>
	<header>
		<h1>記事のタイトル</h1>
		<p>概要文章。</p>
		<nav>
			<h2>目次</h2>
			<ol>
				<li>1章</li>
				<li>2章</li>
			</ol>
		</nav>
	</header>

	<section>
		<h2>1章</h2>
		<p>1章のテキスト。</p>
	</section>

	<section>
		<h2>2章</h2>
		<p>1章のテキスト。</p>
	</section>

	<footer>
		<div>記事の更新履歴。</div>
	</footer>
</article>

入れ子で利用

article要素の中にarticle要素があっても文法違反ではありません。中のarticle要素は、外のarticle要素に関連する内容でなければいけません。例えば記事とコメントを下記のようにマークアップできます。

<!-- 記事 -->
<article>
	<h1>日記</h1>
	<p>ライブに参加してきました。</p>

	<!-- 記事へのコメント1 -->
	<article>
		<footer>
			<p>投稿者: Aさん</p>
			<p>投稿日: 2017/08/16 21:20</p>
		</footer>
		<p>それは良かったですね。</p>
	</article>

	<!-- 記事へのコメント2 -->
	<article>
		<footer>
			<p>投稿者: Bさん</p>
			<p>投稿日: 2017/08/21 21:20</p>
		</footer>
		<p>今度、感想を聞かせて下さい。</p>
	</article>
</article>

デモ

article要素のデモです。要素の中身は、独立して再利用できる内容にしましょう。

<!-- このコードは編集できます。 -->

<article>
	<h1>SYNCER</h1>
	<p>SYNCERは2014年6月にスタートした個人ブログです。</p>
	<p>多くのユーザーの方々に役に立てるよう、頑張りたいと思います。</p>
</article>

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

Chrome	Firefox	Safari	Edge	IE	Opera	iOS Safari	Android
●	●	●	●	● 9+	●	●	●

概要

属性

グローバル属性

サンプルコード

マークアップ

入れ子で利用

デモ

サポート状況

関連記事