HTML

The article element is an HTML tag that indicates a section of independent content, such as an article, blog post, review, news, and so on.

article 要素

　HTMLの article要素は、ドキュメント内の独立したコンテンツや記事を示すために使用されます。この要素は、その内容を単独で分離できる独立した要素であり、他のコンテンツと独立して配信することができます。

　article要素は、記事、ブログ投稿、ニュース記事、掲示板の投稿など、他のコンテンツと明確に区別される単一のトピックを含むコンテンツに使用することが適しています。それは、ドキュメントの他の部分から独立して配信可能な完全な単一の要素でなければなりません。

　例えば、１つのWebページに複数の記事がある場合、それぞれの記事を article要素で囲むことで、その記事が他のコンテンツから独立していることを示すことができます。

　以下は、article要素の使用例です。

<article>
	<h1>Article Title</h1>
	<p>Article content goes here</p>
	<p>More article content goes here</p>
</article>

　article要素は、通常、section要素や div要素の中に置かれます。しかし、他のセクション内に含まれない、単一のコンテンツを表す場合は、そのままドキュメント内に配置することもできます。

　article要素には、通常、header要素と footer要素が含まれ、タイトルや作成日、著者情報などの追加情報を提供することができます。また、article要素内には、figure要素を使用して画像やグラフィックを含めることもできます。

<article>
	<header>
		<h1>Article Title</h1>
		<p>Written by John Doe</p>
		<p>Published on April 1, 2023</p>
	</header>
	<p>Article content goes here</p>
	<p>More article content goes here</p>
	<footer>
		<p>Share this article:</p>
		<ul>
			<li>Facebook</li>
			<li>Twitter</li>
			<li>LinkedIn</li>
		</ul>
	</footer>
</article>

　article要素は、SEO（検索エンジン最適化）の観点からも重要です。article要素が正しく使用されると、検索エンジンはページ内の主要なコンテンツを特定し、それらをより重要に扱うことができます。これにより、検索エンジンのランキングに影響を与えることができます。

　ただし、article要素は、必ずしもすべてのコンテンツに使用する必要はありません。単にページの主要なコンテンツを示す場合は、main要素を使用することができます。また、複数の関連する記事をグループ化する必要がある場合は、section要素を使用することができます。

　例えば、複数の関連する記事を含むニュースサイトの場合、section要素を使用して記事をグループ化することができます。そして、各記事を article要素で囲んで、その記事が独立した要素であることを示すことができます。

<section>
	<h2>Breaking News</h2>
	<article>
		<header>
			<h1>Article Title</h1>
			<p>Written by John Doe</p>
			<p>Published on April 1, 2023</p>
		</header>
		<p>Article content goes here</p>
		<p>More article content goes here</p>
	</article>
	<article>
		<header>
			<h1>Another Article Title</h1>
			<p>Written by Jane Smith</p>
			<p>Published on April 2, 2023</p>
		</header>
		<p>Article content goes here</p>
		<p>More article content goes here</p>
	</article>
</section>	  

　article要素は、コンテンツの構造化とセマンティックなマークアップを行うために、HTML文書内で重要な役割を果たします。適切に使用されると、コンテンツをより意味的に分かりやすくし、検索エンジン最適化にも役立ちます。

　article要素は、必ずしも単一の記事やニュースアイテムに限定されるものではありません。他のコンテンツにも使用することができます。例えば、レシピや製品レビュー、ブログ記事、ユーザーのコメントなどに使用することができます。

　また、article要素には header要素、footer要素、section要素、aside要素などの子要素を含めることができます。例えば、以下のように使用することができます。

<article>
	<header>
		<h1>Article Title</h1>
		<p>Written by John Doe</p>
		<p>Published on April 1, 2023</p>
	</header>
	<section>
		<h2>Section 1</h2>
		<p>Section 1 content goes here</p>
	</section>
	<section>
		<h2>Section 2</h2>
		<p>Section 2 content goes here</p>
	</section>
	<aside>
		<h3>Related Links</h3>
		<ul>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
			<li><a href="#">Link 3</a></li>
		</ul>
	</aside>
	<footer>
		<p>Article footer goes here</p>
	</footer>
</article>

　header要素には、記事のタイトル、著者、公開日などの情報を含めることができます。section要素には、記事のセクションを示すことができます。aside要素には、関連するリンクや広告などの補助的なコンテンツを含めることができます。footer要素には、記事のフッター情報を含めることができます。

article要素の概要

カテゴリー

フロー・コンテンツ

セクショニング・コンテンツ

コンテンツ･モデル

フロー・コンテンツ

利用可能な場所

フロー・コンテンツが期待される場所

開始タグ

必須

終了タグ

必須

要素固有のコンテンツ属性

なし

標準的なスタイル

article {
 	display: block;
}