記事タイトル
投稿日:
記事本文...
タイトル: article要素
SEOタイトル: HTML article要素 完全ガイド（自己完結セクション / section との違い / SEO・アクセシビリティ）
| この記事の要点 |
|
article 要素とは
は HTML5 で導入されたセクショニング要素の 1 つで、「単独で配布・再利用できる自己完結したコンテンツ」を表します。具体的にはブログ記事、ニュース記事、フォーラムの投稿、ユーザーコメント、ウィジェット、商品カードなどが該当します。
「このブロックだけを RSS 配信したり、別ページに切り出しても意味が通る」と感じるなら でくくれる、と考えると判断しやすいです。
基本構文
article と section の違い
| 項目 | ||
|---|---|---|
| 意味 | 独立・自己完結したコンテンツ | テーマでまとめた文書の一部 |
| 切り出して使える？ | ○（RSS / 別ページ） | △（前後の文脈が必要） |
| 典型例 | 記事、コメント、商品カード | 記事内の章、タブパネル |
| 見出し | 原則必要 | 原則必要 |
判断に迷ったら「単独で意味が通るか？」を基準に。意味が通るなら article、文書内の部分なら section、どちらでもないただのレイアウト用なら 記事本文... とても参考になりました。 続編期待しています。 EC サイトの商品一覧でも、各カードが独立して意味を持つなら 価格: 9,800円 軽量で長時間バッテリー対応。 SEO 効果を最大化するため、
著者: 山田太郎
投稿日:
更新日:
本文... を選びます。
記事 + コメントの構造例
は入れ子にできます。ブログ記事の本体を でくくり、その中に各コメントを別の で表現するのが典型パターンです。記事タイトル
コメント
山田さんのコメント
佐藤さんのコメント
商品カードでの利用
を使えます。新着商品
ワイヤレスイヤホン
スマートウォッチ
...
記事メタデータ（推奨）
内には見出しと日時を含めるのが推奨です。 要素の datetime 属性は機械可読な ISO 8601 形式で記述します。React 19 の新機能まとめ
article を使うべきか判定フロー
質問 YES NO 独立して意味が通る？ article 候補 section / div RSS で配信できそう？ article section テーマでまとめた文書の一部？ section article / div レイアウトのためだけ？ div article / section SEO とアクセシビリティの効果
よくある誤用
や で十分
関連