ホームページを自分で作成したり、既存サイトを修正したりできるようになりたい方が、HTML を学ぶ中で知っておきたいタグの1つが「article（アーティクル）タグ」です。
articleタグ は、ブログ記事やニュース記事など、ひとまとまりの独立したコンテンツを表すために使われます。
画面のデザインを変えるためのタグではなく、「ここは1つの記事やコンテンツの範囲です」と HTML 上で意味を持たせる役割があります。
ここでは、HTML 初心者の方に向けて、articleタグ の意味や役割を専門用語をできるだけ使わずに解説します。
また、実際にホームページを編集するときに迷いやすい、以下の疑問についても紹介します。
・初心者でも真似できる articleタグ の基本的な書き方
・articleタグ を使わない場合、ホームページにどのような違いが出るのか
・1ページ内に articleタグ を複数使っても問題ないのか
この記事を読み終える頃には、articleタグ が何のために存在するのかを理解し、自分で HTML を確認・修正するときに迷わないための基礎知識を身につけられます。
HTMLのarticleタグとは？
article（アーティクル）タグは、ホームページの記事やひとまとまりの独立したコンテンツを表すための HTMLタグ です。
英語の「article」には「記事」や「論文」といった意味があります。
その名前のとおり、それ単体でも内容が成り立つコンテンツを囲むときに使用します。
HTML5で追加された背景
articleタグ は、HTML5 で追加された意味を持つ HTMLタグ（セマンティックタグ）の1つです。
以前の HTML では、コンテンツのまとまりを作る際に divタグ がよく使われていました。
しかし、divタグ には「ここは記事です」といった意味はありません。
そこで、「ここは独立した記事やコンテンツです」という意味を HTML に持たせ、ページの構造をより分かりやすくするために articleタグ が追加されました。
どんな要素を囲むタグなのか
articleタグ は、次のような単体でも意味が成り立つコンテンツを囲むときに使用します。
・ブログの個別記事
・ニュースサイトの記事
・お知らせ・新着情報の詳細
・商品レビュー
・ユーザーの口コミやコメント（1件ごと）
これらに共通しているのは、ページの別の場所や他のページに移動しても、1つのコンテンツとして成立することです。
ホームページを自分で作成・修正するときは、「この内容だけでも意味が通じるか」を判断基準にすると、articleタグ を使う場面が分かりやすくなります。
articleタグの意味と役割
articleタグ は、ホームページ内のコンテンツに「これは1つの記事・独立したコンテンツです」という意味を持たせる HTMLタグ です。
見た目を変えるためのタグではなく、コンテンツの意味を HTML で表現することが主な役割です。
ここからは、articleタグ がどのようなコンテンツに使われるのか、また divタグ とは何が違うのかを詳しく見ていきます。
独立したコンテンツを表す
articleタグ で囲むのは、「その部分だけを切り取って、別のWebサイトやSNSに貼り付けても、問題なく内容が理解できる」コンテンツです。
例えば、次のようなものは articleタグ に適しています。
・ブログの記事
・ニュース記事
・商品レビュー
・お知らせ
・ユーザーの口コミやコメント
一方で、ページの背景やヘッダー、フッター、サイドバーの装飾など、それだけでは意味を持たない要素には articleタグ は使用しません。
articleタグ を使うか迷ったときは、「この内容だけを別のページに掲載しても記事として成立するか」を判断基準にすると分かりやすいでしょう。
「ここからここまでが記事」という意味を伝える
ホームページ内にある特定の文章に対して、「ここからが記事の始まりで、ここまでが記事の終わり」という区切りを明確にします。
このように articleタグ で記事のまとまりをハッキリさせておくと、検索エンジン（Googleなど）が「ここが1つのニュース記事なんだな」と正確に内容を読み取れるようになります。
また、画面の文字を読み上げるソフト（スクリーンリーダー）を使う人にとっても、ページ内にある記事の塊へ直接ジャンプして移動しやすくなるという大切な役割があります。
divタグとの違い
初心者の方が一番迷いやすいのが、「div（ディブ）タグ」との違いです。
・articleタグ：その場所自体に「ここは独立した記事である」という意味がある
・divタグ：タグ自体には何の意味もない（ただのグループ分けの箱）
画面上での見た目（デザイン）は、articleタグ を使っても、divタグ を使っても全く同じように表示されます。
しかし、divタグ ばかりでホームページを作ってしまうと、コンピューターにとっては「どこからどこまでが1つの記事の塊なのか区別がつかない、ただの箱だらけのページ」になってしまいます。
そのため、「デザイン（見た目）を整えたいだけの時は divタグ」、「独立した記事の塊を示したい時は articleタグ」というように明確に使い分けます。
articleタグを使うメリット
ホームページを作成したり修正したりするときに、divタグ ではなく articleタグ を使うことには、主に3つのメリットがあります。
コードが読みやすく、修正・管理しやすくなる
articleタグ を使うと、「ここからここまでが1つの記事（コンテンツ）のまとまりである」とソースコードを見るだけで分かります。
例えば、divタグ だけでページを作成すると、どの部分が記事なのか、レイアウトのためのグループなのかをタグ名だけで判断することはできません。
一方、articleタグ で囲まれていれば、「ここが記事の範囲だ」とすぐに理解できます。
HTML の意味に合ったタグを使うことで、読みやすく管理しやすいコードになるため、自分でホームページを修正するときはもちろん、複数人でホームページを管理していて他の人がソースコードを見る場合でも編集箇所を見つけやすくなります。
アクセシビリティの向上に役立つ
アクセシビリティとは、高齢の方や目の不自由な方を含め、さまざまな人がホームページを利用しやすくするための考え方です。
articleタグ が適切に使われていると、スクリーンリーダーなどの支援技術がページ内の記事のまとまりを認識しやすくなります。
そのため、利用者が目的のコンテンツを見つけやすくなり、より使いやすいホームページづくりにつながります。
articleタグの基本的な書き方
articleタグ の書き方はとてもシンプルです。
基本的には、記事の「タイトル」や「本文」をまるごと囲むだけで完成します。
実際のコード例を見ながら、書き方のルールを確認していきます。
<article>
<!-- 記事のヘッダー部分 -->
<header>
<h2>記事タイトル開始タグと終了タグで囲む
HTML の基本ルール通り、記事の塊の始まりに <article>（開始タグ）、終わりに </article>（終了タグ）を記述します。
この2つのタグで挟まれた部分が、コンピューターに「1つの独立した記事」として認識されます。
articleタグの中に何を囲むか（他のタグとの関係）
基本的には、その記事を構成する要素をすべて囲みます。
articleタグ の「中」には、文章をより分かりやすくするために他のタグを組み合わせて使うことができます。
・h1タグを入れてもいいの？：入れても問題ありません。articleタグ（独立した塊）の内側であれば、新しく h1タグ から見出しをスタートさせることがルール上認められています。
・header / footerタグ：article の「中」で使えます。記事の「タイトルや公開日」を header で囲み、「著者情報やカテゴリ」を footer で囲む、という使い方ができます。
・sectionタグ：article の「中」で使います。記事の本文が長くなったとき、「章（セクション）」ごとに文章を区切るために使います。
・asideタグ：article の「外」で使うことが多いです。aside は「本編とは関係のない補足（サイドバーなど）」を表すため、独立した記事本編である article とは分けて配置します。
見た目はCSSで調整すること
ここで初心者が一番間違いやすいポイントは、「articleタグ を書いても、ホームページの見た目（文字の大きさや配置、背景色など）は何も変わらない（透明な箱のまま）」ということです。
articleタグ は、あくまで「ここは記事の塊です」という意味をつけるためのタグです。
もし記事の背景に色をつけたり、枠線で囲ったりしてデザインを整えたい場合は、このタグに対して「CSS（シーエスエス）」という別の仕組みを使って調整します。
「タグは意味づけ、デザインは CSS」という役割分担を意識しましょう。
articleタグを使わない場合はどうなる？
「articleタグ を使わないと、ホームページが表示されなくなるのでは？」と思うかもしれませんが、結論から言うと、articleタグ を使わなくてもホームページの表示や動作に問題はありません。
articleタグ は、ページの見た目を変えたり、機能を追加したりするためのタグではありません。
主な役割は「ここが独立した記事・コンテンツである」という意味を HTML に持たせることです。
そのため、使わない場合でもページ自体は作成できますが、HTML 上でコンテンツの意味を表しにくくなります。
divタグでもページは作れる
articleタグ の代わりに、divタグ を使って記事のまとまりを囲んでも、ホームページは問題なく作成できます。
<div class="news-box">
<h2>記事タイトル</h2>
<p>記事本文が入ります。</p>
</div>このように書き換えても、ブラウザで表示したときの文字の大きさやデザインは変わりません。
divタグ は、HTML の要素をグループ化するためのタグなので、文章や画像などをまとめて表示することができます。
HTMLの意味づけが弱くなる
articleタグ を使わない場合でもページは作れますが、「ここが独立した記事・コンテンツである」という HTML 上の意味は表現できません。
divタグ には、単に要素をまとめる役割しかなく、「記事」を表す意味はありません。
一方、articleタグ を使うことで、その範囲が1つの独立したコンテンツであることを HTML で明確に示せます。
そのため、articleタグ を使わないこと自体が問題になるわけではありませんが、内容に合った HTMLタグ を使用することで、より分かりやすく管理しやすいページ構造になります。
自分でホームページを作成したり修正したりするときは、「表示できればよい」だけではなく、「その部分が何を表しているのか」を意識してタグを使い分けることが大切です。
articleタグは複数使える？
articleタグ は、1つのページ内に複数使用できます。
「articleタグ は1つの記事を表すタグだから、ページ内で1回しか使えないのでは？」と思うかもしれませんが、そのような制限はありません。
1つのページ内に、独立したコンテンツが複数ある場合は、それぞれを articleタグ で囲みます。
ブログ一覧などの例
articleタグ を複数使う代表的な例が、ブログやニュースサイトの一覧ページです。
例えば、新着記事が複数表示されるページでは、1つ1つの記事がそれぞれ単体でも内容を理解できる独立したコンテンツです。
そのため、記事ごとに articleタグ を使用します。
<article>
<h2>最新のニュース記事1</h2>
<p>1つ目の記事の要約テキストです。</p>
</article>
<article>
<h2>最新のニュース記事2</h2>
<p>2つ目の記事の要約テキストです。</p>
</article>
<article>
<h2>最新のニュース記事3</h2>
<p>3つ目の記事の要約テキストです。</p>
</article>このように、1ページ内に独立した記事が複数ある場合は、その数に合わせて articleタグ を複数配置します。
重要なのは、使用する数ではなく「それぞれが独立したコンテンツとして成立しているか」です。
記事の数だけ機械的に articleタグ を増やすのではなく、1つのまとまりとして扱うべき内容かどうかを基準に判断しましょう。
