ywork2020.com

Title

独立した記事セクションを表す

目次 (INDEX)

article とは

ここで説明する article とは次の語句からなる HTML 要素です。
article
読み: アーティクル
意味: 記事、論説、論文

目次に戻る

article 要素の概要

この要素は HTML 文書内に 1 つの記事領域を表します。

例えば、ブログ、雑誌、新聞の記事等があげられます。 ブログなどはシステムの仕様や設定などにより、1 記事を連続で表示する機能を備えたものも多々あります。 この article 要素内に配置されたコンテンツを 1 ページとして認識すると考えた方が理解しやすいかもしれません。

上記の理解で考えれば、この要素内には、 h 要素 はもとより、 header 要素footer 要素なども含まれることが自然です。

つまり、この要素に内包されたコンテンツは独立した 1 つの記事であるということを表しています。 もっと簡単にいうと、「 この範囲が 1 つのページですよ。 」 と表すということになります。

article 要素は入れ子にすることもできます。 子要素となる article 要素は、親要素である article 要素の内容に関連している別の記事を表します。 つまり、子要素として使用する場合は、自己完結した関連記事のセクションを表します。 そして、その範囲だけで 1 つのコンテンツとしても成立するような記事のセクションを表すことになります。

例を挙げると、ブログの投稿へのコメントが、それに当たります。 また、ニュースの記事、ブログの記事、掲示板の投稿にある各記事等や、それに付随するコメントなども独立した記事セクションといえます。

この要素は開始タグと終了タグが必要です。
<article> </article>

目次に戻る

サンプルコード

<body>
	<h1> 見出し </h1>
	<article>
		<header>
			<h2> 見出し </h2>
		</header>
		<section>
			<h3> 見出し </h3>
		</section>
		<section>
			<h3> 見出し </h3>
		</section>
		<footer>
			フッターコンテンツ
		</footer>
	</article>
	<article>
		<header>
			<h2> 見出し </h2>
		</header>
		<section>
			<h3> 見出し </h3>
		</section>
		<section>
			<h3> 見出し </h3>
		</section>
		<footer>
			フッターコンテンツ
		</footer>
	</article>
</body>

目次に戻る

使用できる属性

目次に戻る