article要素

ページの独立した記事（内容）を表します。ブログの記事、Webマガジンの記事（エントリー）、記事へのコメント、メインコンテンツではない独立したコンテンツなど、様々な場所で使用することができます。

サンプルコード

<main>
	<h1>記事一覧</h1>
	<article>
		<h2>記事タイトル1</h1>
		<p>記事本文</p>
	</article>
	<article>
		<h2>記事タイトル2</h1>
		<p>記事本文</p>
	</article>
	<article>
		<h2>記事タイトル3</h1>
		<p>記事本文</p>
	</article>
</main>

カテゴリー

フローコンテンツ、セクショニングコンテンツ、パルパブルコンテンツ
コンテンツモデル

フローコンテンツ
使用ケース

フローコンテンツが期待される場所（ただし、main要素を子孫要素に持つことはできません）

属性

グローバル属性: グローバル属性のみ使用することができます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。

使用例

ブログの記事ページを想定したサンプルコード

「コーヒーの淹れ方」をテーマに書いた記事で使って、article要素のコードを書いてみます。
記事の大枠をarticle要素で囲み、セクションを分ける部分でsection要素を使っています。

<body>

<!-- ブログ本文 -->
<main>
	<article>
		<header>
			<h1>コーヒーの淹れ方について</h1>
			<p><b class="lead">多くの方に親しまれているコーヒー。お仕事に、休日のひと時に、目覚めの一杯など様々な場面で飲む機会があります。<br>今回は、そんなコーヒーをより楽しむための美味しい入れ方をご紹介します。</b></p>
		</header>
		<section>
			<h2>まずは淹れ方選びから</h2>
			<p>一言で「コーヒー」と言っても、その淹れ方は様々です。<br>ペーパードリップを使った一般的な方法から、インスタントコーヒーでお手軽にいれる方法、少し手の込んだフレンチプレス。あなたはいつも...</p>
		</section>
		<section>
			<h2>フレンチプレスの淹れ方</h2>
			<p>まずは容器に挽いた豆を入れて、熱湯を容器の半分まで注ぎます。<br>この時、まだ蓋はしないようにしてください。<br>30秒ほど経過した後に...</p>
		</section>
		<section>
			<h2>ペーパードリップの淹れ方</h2>
			<p>まずは容器にペーパーフィルターをセットしますが、ここで折り方を少し工夫していきます。<br>通常であれば...</p>
		</section>
	</article>
</main>
<!-- //ブログ本文 -->

<!-- サイドメニュー -->
<aside>
	<h2>カテゴリー</h2>
	<ul>
		<li><a href="#">HTML5</a></li>
		<li><a href="#">CSS3</a></li>
		<li><a href="#">PHPプログラミング</a></li>
	</ul>
</aside>
<!-- //サイドメニュー -->

</body>

こちらの記事は役に立ちましたか？

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます！
運営の参考にさせていただきます。