HTMLのセマンティックタグを学んでいると、article タグが出てきます。ただ、section や div と何が違うのか、最初はかなり迷いやすいタグです。
結論からいうと、articleタグとは、ブログ記事・ニュース記事・投稿カードのように、それだけを取り出しても意味が通じる独立した内容を囲むタグです。この記事では、まずページ構造のイメージを見てから、articleタグの使いどころ、sectionやdivとの違い、実務での書き方を整理します。
まず見てください：articleタグを書くと画面ではこう見える
articleタグは、ページ全体の中にある「単独で読める内容」を囲むときに使います。まずは、記事カードのソースコードと、ブラウザで見える表示結果を並べて確認してみましょう。
この画像で見ると、左側の <article> で囲んだ範囲が、右側では1つの記事カードとして見えていることが分かります。ただし articleタグは見た目をカードにするためのタグではありません。ページの中にある一つの内容を、意味のある単位として囲むためのタグです。
articleは「記事っぽい見た目」ではなく、「単体で読んでも意味があるか」で判断すると分かりやすいです。
結論：articleタグは単独で成立する内容に使う
article タグは、文書やページの中で独立して配布・再利用できる内容を表すために使います。初心者向けに言い換えると、「この部分だけを切り出しても、一つの読み物として意味が分かるか」が判断の軸になります。
- ブログ記事の本文
- ニュースサイトの各ニュース
- 検索結果や記事一覧に並ぶ投稿カード
- ユーザーのレビューやコメント
- 商品紹介の中でも、単独で成り立つレビュー記事
逆に、ページ内の単なる装飾用の箱や、意味のないレイアウト調整には articleタグを使いません。その場合は divタグ のほうが自然です。
articleタグの基本的な書き方
基本形は、独立した内容全体を <article> で囲みます。中には見出しや本文、日付、画像などを入れられます。
<article> <h2>HTMLの基本を学ぶ</h2> <p>HTMLはWebページの構造を作るための言語です。</p> <a href="/web-design/html-basic/">続きを読む</a> </article>
この例は、記事一覧に表示される1つの記事カードのように考えると分かりやすいです。タイトル、概要、リンクがまとまっており、このブロックだけを見ても「HTMLの基本を学ぶ記事への案内」だと分かります。
articleタグの中には、さらに header、section、footer などを入れて、記事の内部構造を分けることもあります。articleは大きな独立単位、その中の話題分けに section を使う、と考えると整理しやすいです。
section・div・mainとの違い
articleタグで迷う一番の原因は、section、div、mainとの違いです。それぞれ役割が違うため、「どれでも同じ箱」と考えると混乱します。
| タグ | 役割 | 判断の目安 |
|---|---|---|
article | 単独で成立する内容 | この部分だけ取り出しても読めるか |
section | ページや記事内の話題の区切り | 見出しを付けられる意味のまとまりか |
div | 意味を持たない汎用的な箱 | レイアウトやCSSのための箱か |
main | ページの主要コンテンツ | そのページの中心部分全体か |
たとえばブログ記事ページなら、ページの主要部分を mainタグ で囲み、その中に記事本文として articleタグを置き、記事内の章を sectionタグ で分ける、という構造が考えられます。
実務でよく使うarticleタグの場面
実務でarticleタグを見かけやすいのは、ブログやニュース、メディアサイトです。特に記事一覧ページでは、同じ形のカードが複数並びます。各カードはそれぞれ別の記事を表すので、articleタグと相性がよいです。
<main>
<article>
<h2>HTMLとは？</h2>
<p>HTMLの役割を初心者向けに解説します。</p>
</article>
<article>
<h2>CSSとは？</h2>
<p>CSSで見た目を整える基本を解説します。</p>
</article>
</main>
このコードでは、2つのarticleがそれぞれ独立した記事カードになっています。カードの見た目はCSSで整えますが、HTML上では「それぞれが独立した記事の案内である」と分かる構造になっています。
articleタグを使わないほうがよい場面
articleタグは便利ですが、何でも囲めばよいわけではありません。単独で意味が通じない部分には向きません。
- デザイン調整だけの箱
- ボタンや画像を横並びにするだけのコンテナ
- ページ全体の主要部分を表したいだけの場所
- 記事内の章や小見出し単位の区切り
たとえば、カードを横並びにするためだけの外枠には divタグを使うほうが自然です。一方、その外枠の中に並ぶ1つ1つの記事カードは articleタグで表せる場合があります。この違いが見えてくると、セマンティックHTMLの理解がかなり進みます。
articleタグでよくあるミス
- レイアウト用の箱をすべて article にしてしまう
- 単独で読めない小さな部品にも article を使う
- article の中に見出しがなく、何のまとまりか分かりにくい
- section との違いを考えず、話題の区切りまで article にしてしまう
- CSSの見た目だけでタグを選んでしまう
タグ選びで迷ったら、「このまとまりだけを検索結果やRSS、記事一覧に出しても意味が通じるか」と考えてみてください。通じるならarticle候補、通じないならsectionやdivのほうが自然なことが多いです。
まとめ
articleタグは、HTMLの中で「独立した内容」を表すためのタグです。見た目を作るための箱ではなく、内容の意味をブラウザや読み手に伝えるためのタグとして考えると分かりやすくなります。
- articleタグは単独で読める内容に使う
- ブログ記事、ニュース、投稿カード、レビューなどと相性がよい
- sectionは話題の区切り、divは意味を持たない箱
- 迷ったら「この部分だけ取り出して意味が通じるか」で判断する
セマンティックHTML全体を学びたい場合は、まず セマンティックHTMLの基本 を押さえたうえで、sectionタグ、articleタグ、mainタグの役割を順番に整理すると理解しやすいです。