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

公開日: 2017/02/08

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

概要

名前

article

カテゴリー

Flow content

Sectioning content

Palpable content

配置できる場所

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

コンテンツモデル

Flow content。

タグの省略

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

DOM Interface

HTMLElement

デフォルトのスタイル

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要素に関連する内容でなければいけません。記事とコメントを下記のようにマークアップできます。

HTML

<!-- 記事 -->
<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>

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜article要素＞ - 自己完結するコンテンツのまとまり</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/article/">
		<style>
			body {
				background-color: #fff ;
			}

			article {
				background-color: #fffff0 ;
			}
		</style>
	</head>
	<body>

<p>article要素の中身は、独立して再利用できる内容にしましょう。</p>

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

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/576/"> <meta charset="utf-8"> <title>【デモ】＜article要素＞ - 自己完結するコンテンツのまとまり</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/article/"> </head> <body>

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

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; } article { background-color: #fffff0 ; }

</style>

</script>