articleタグの概要
| 独立したコンテンツのマークアップ HTMLタグ | ||
|
<article id=”識別子” class=”クラス名”> … </article> 概要 |
||
|
articleタグで使用できる主な属性一覧
| 属性 | 説明 | 使用例 |
|---|---|---|
id |
記事ごとに一意の識別子を付与 | <article id="post-1">...</article> |
class |
CSSでスタイルを適用するためのクラスを指定 | <article class="blog-entry">...</article> |
lang |
記事の言語を指定 | <article lang="en">...</article> |
itemprop |
構造化データを指定（Microdata用） | <article itemprop="articleBody">...</article> |
articleタグの基本的な使い方
articleタグは、独立した記事やコンテンツを定義する際に使用します。
<article>
<h3>記事のタイトル</h3>
<p>この記事は、独立したコンテンツとしてマークアップされています。</p>
</article>SEOとアクセシビリティへの影響
- SEO効果: 検索エンジンが
articleタグ内のコンテンツを「独立した記事」と認識し、適切にインデックス化しやすくなる。 - アクセシビリティ: スクリーンリーダーを使用するユーザーにとって、
articleタグがあることでコンテンツの区切りが明確になる。
注意事項
- 独立したコンテンツにのみ使用する: 文章の一部分ではなく、単独で意味を持つ記事やニュースに使用する。
- 適切な見出しタグを使用する:
h3やh4などの見出しタグを適切に使い、記事の階層構造を明確にする。 - セクション（sectionタグ）との違いを理解する:
sectionは関連する内容をグループ化するのに対し、articleは単独のコンテンツとして扱う。 - ブログ記事以外にも使える: フォーラムの投稿、製品レビュー、コメントなどにも利用可能。
よくある質問
- Q: articleタグとsectionタグの違いは？
- A:
articleタグは独立したコンテンツ、sectionタグは関連する内容をグループ化する際に使用します。 - Q: articleタグ内に複数のセクションを含めてもよいですか？
- A: はい、
articleタグ内にsectionタグを含め、記事内のサブセクションを定義することが可能です。 - Q: ブログのコメント欄にも使えますか？
- A: はい、各コメントが独立した投稿として扱われる場合は、
articleタグを使うのが適切です。
まとめ
- articleタグは、ブログ記事やニュース記事などの独立したコンテンツを示す。
- 検索エンジンが内容を正しくインデックスしやすくなるため、SEOに有効。
- スクリーンリーダーにより、コンテンツの区切りが明確になるため、アクセシビリティ向上につながる。
- 見出しタグや適切なマークアップを組み合わせて使用する。
- フォーラムの投稿、製品レビュー、ブログコメントなどにも活用可能。