目次
- articleタグとは？
- なぜ article を使うの？
- ① Google が内容を正しく理解しやすくなる（SEO）
- ② アクセシビリティの向上
- ③ コードが整理されて読みやすくなる
- article の基本的な使い方
- article を使うべき場面
- ① ブログ記事
- ② ニュース / お知らせ
- ③ 商品紹介ページの“1商品”
- ④ FAQのひとつの質問
- article を使わないほうが良い場面
- ただのレイアウト用途（カード・ボックスなど）
- セクション分けだけしたいとき（sectionが適切）
- section と article の違い（よくある質問）
- article内でよく使う要素
- header（記事のタイトル部分）
- footer（著者情報・SNSリンクなど）
- figure + figcaption（画像と説明）
- 実務での構造例（ブログ記事ページ）
- まとめ
articleタグとは？
<article> タグは、それ単体で独立したコンテンツとして成立する部分に使うHTML5のセマンティックタグです。
例：
- ブログ記事
- ニュース記事
- 商品紹介
- レビュー
- 掲示板の投稿
- コメント（場合により）
- FAQの1項目
他のページに埋め込んでも意味が成立する、これが article の最大の特徴です。
なぜ article を使うの？
理由は3つあります。
① Google が内容を正しく理解しやすくなる（SEO）
検索エンジンに
「ここが1つの記事ですよ」
と伝えられるため、情報構造の評価が上がる。
② アクセシビリティの向上
スクリーンリーダーが
「これは独立したコンテンツです」
と認識しやすくなる。
③ コードが整理されて読みやすくなる
CSSが当てやすく、運用しやすい。
article の基本的な使い方
<article>
<h2>記事タイトル</h2>
<p>ここに本文が入ります。</p>
</article>めちゃくちゃシンプルです。
article を使うべき場面
① ブログ記事
<article class="post">
<h1>今日の活動レポート</h1>
<p>本日の療育では〜</p>
</article>ブログは典型的な article の用途です。
② ニュース / お知らせ
<article class="news-item">
<h2>新サービス開始のお知らせ</h2>
<time datetime="2025-11-16">2025年11月16日</time>
<p>本日より〜</p>
</article>「ニュース一覧」には複数の article を並べるのが正解。
③ 商品紹介ページの“1商品”
<article class="product">
<h2>本革ペンケース</h2>
<p>上質なレザーを使用した……</p>
</article>商品1つ＝独立コンテンツなので article。
④ FAQのひとつの質問
<article class="faq-item">
<h3>Q. 見学はできますか？</h3>
<p>A. はい、事前予約で可能です。</p>
</article>質問・回答のセットが独立していればOK。
article を使わないほうが良い場面
ただのレイアウト用途（カード・ボックスなど）
下記のような「意味のない箱替わり」は NG。
<article class="box">…</article> <!-- これはNG -->意味（セマンティクス）を持たせるために使うタグなので、
見た目の枠として使うのは誤り。
セクション分けだけしたいとき（sectionが適切）
<section>
<h2>サービス紹介</h2>
</section>“独立した記事” ではなく “ページ内の構造分け” の場合は section が正しい。
section と article の違い（よくある質問）
| タグ | 目的 | 独立可能？ | 例 |
|---|---|---|---|
| article | 独立した1つのコンテンツ | ◎ | ブログ記事 / ニュース / 商品情報 |
| section | ページ内の意味的区切り | △ | 「サービス紹介」「会社概要」など |
| div | レイアウト用 | ✕ | box, wrapper |
article内でよく使う要素
header（記事のタイトル部分）
<article>
<header>
<h1>記事タイトル</h1>
<time datetime="2025-11-16">2025年11月16日</time>
</header>
</article>footer（著者情報・SNSリンクなど）
<footer>
<p>著者：HP Build Studio</p>
</footer>figure + figcaption（画像と説明）
<figure>
<img src="post.jpg" alt="イベントの様子">
<figcaption>イベントの様子</figcaption>
</figure>実務での構造例（ブログ記事ページ）
<article class="post">
<header>
<h1>施設の年間イベントまとめ</h1>
<time datetime="2025-11-16">2025年11月16日</time>
</header>
<section>
<h2>春のイベント</h2>
<p>お花見散歩などを行いました。</p>
</section>
<section>
<h2>夏のイベント</h2>
<p>水遊びや制作活動を行いました。</p>
</section>
<footer>
<p>この記事を書いた人：HP Build Studio</p>
</footer>
</article>ブログ・お知らせ・コラム・レポートなどでは
常にこのパターンが王道です。
まとめ
- article＝独立して成立するコンテンツ
- ブログ・ニュース・商品説明などに使う
- section＝ページ内の区切り
- div＝意味のない箱
- articleを使うとSEO・アクセシビリティに強くなる
まずはブログ記事やニュースから
<article> を使う習慣をつけるのがおすすめです。