MENU
  1. ホーム
  2. HTML&CSS
  3. 【HTML】articleタグの使い方：sectionとの違いやmain・div・asideとの使い分け

【HTML】articleタグの使い方：sectionとの違いやmain・div・asideとの使い分け

HTML&CSS
html-article-tag

Webサイトのメインコンテンツを定義するHTMLの<article>タグは、検索エンジンに正しい構造を伝えるSEO対策において欠かせない要素です。

本記事では、混同しがちなsectionやdivとの使い分け、実務で使えるコピペ可能なHTML/CSSテンプレートを解説します。

目次

articleタグとは：意味と役割

HTML5で導入されたセマンティックタグの中でも、ページ内の「メインコンテンツ」を定義する上で重要なのが「articleタグ」です。

HTML5のタグの中でも特に正確な理解が求められるタグです。

ここでは、articleタグの正しい定義、articleタグの内部構造、実務で初心者が陥りやすいミスを解説します。

articleタグとは：意味と役割
  • 独立して完結するコンテンツとしての定義
  • articleタグ内の基本構造

独立して完結するコンテンツとしての定義

<article>タグを一言で表すと、「その部分だけを切り取って他のサイトやRSSリーダーに配信しても、単独で意味が通じるコンテンツ」のことです。

つまり、ブログの1つの記事、ニュースサイトの1つのニュース、掲示板の1つの投稿など、まさに<article>に該当します。

「この記事だけを丸ごと他のサイトに転載した時、読者はその内容を理解できるか？」と自問自答してください。

理解できるなら<article>、単なるレイアウトの箱なら<div>を使います。

💡 articleタグの正しい使いどころ

⭕️ 良い例（単独で切り取っても意味が通じる）

HTML5の基本構造

2026年4月9日 投稿

HTML5では、articleやsectionといった意味を持つタグが導入され…

❌ 悪い例（これだけ切り取られても意味不明）

ピックアップ広告
[ おすすめのWebデザインツール ]
<!– ⭕️ 正しい使い方：ブログ記事など –>
<article>
  <h2>記事のタイトル</h2>
  <p>記事の本文…</p>
</article>

<!– ❌ 間違った使い方：広告やサイドバーの部品 –>
<article> <!– ※ここはただのdivかasideにするべき –>
  <h3>広告</h3>
  <a href=”#”>バナー画像</a>
</article>

※「RSSリーダーで配信された時に、この記事として成立するか？」が一番わかりやすい判断基準です。

HTMLコード表示
<div class="harticle-sec1-wrapper">
  
  <div class="harticle-sec1-demo-area">
    <div class="harticle-sec1-box">
      <div class="harticle-sec1-label">💡 articleタグの正しい使いどころ</div>
      
      <div class="harticle-sec1-visual">
        <p style="font-size:12px; color:#198754; font-weight:bold; margin:0 0 5px 0;">⭕️ 良い例（単独で切り取っても意味が通じる）</p>
        <article class="harticle-sec1-good-article">
          <div class="harticle-sec1-title">HTML5の基本構造</div>
          <p class="harticle-sec1-meta">2026年4月9日 投稿</p>
          <p class="harticle-sec1-text">HTML5では、articleやsectionといった意味を持つタグが導入され...</p>
        </article>

        <p style="font-size:12px; color:#dc3545; font-weight:bold; margin:20px 0 5px 0;">❌ 悪い例（これだけ切り取られても意味不明）</p>
        <article class="harticle-sec1-bad-article">
          <div class="harticle-sec1-bad-title">ピックアップ広告</div>
          <div style="background:#e9ecef; padding:10px; text-align:center;">
            [ おすすめのWebデザインツール ]
          </div>
        </article>
      </div>

      <div class="harticle-sec1-code">
        <!-- ⭕️ 正しい使い方：ブログ記事など --><br>
        <span class="harticle-sec1-hl-green"><article></span><br>
          <h2>記事のタイトル</h2><br>
          <p>記事の本文...</p><br>
        <span class="harticle-sec1-hl-green"></article></span><br><br>
        <!-- ❌ 間違った使い方：広告やサイドバーの部品 --><br>
        <span class="harticle-sec1-hl-red"><article></span> <!-- ※ここはただのdivかasideにするべき --><br>
          <h3>広告</h3><br>
          <a href="#">バナー画像</a><br>
        <span class="harticle-sec1-hl-red"></article></span>
      </div>
      <p class="harticle-sec1-note">※「RSSリーダーで配信された時に、この記事として成立するか？」が一番わかりやすい判断基準です。</p>
    </div>
  </div>
</div>
CSSコード表示
.harticle-sec1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.harticle-sec1-demo-area {
  display: flex;
  justify-content: center;
}
.harticle-sec1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}
.harticle-sec1-label { font-size: 15px; font-weight: bold; margin-bottom: 20px; color: #333; }

.harticle-sec1-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

/* 良い例のスタイル */
.harticle-sec1-good-article {
  background-color: #fff;
  border-left: 4px solid #198754;
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.harticle-sec1-title { margin: 0 0 5px 0; font-size: 16px; color: #333; }
.harticle-sec1-meta { margin: 0 0 10px 0; font-size: 11px; color: #6c757d; }
.harticle-sec1-text { margin: 0; font-size: 13px; color: #495057; line-height: 1.5; }

/* 悪い例のスタイル */
.harticle-sec1-bad-article {
  background-color: #fff;
  border: 1px dashed #dc3545;
  padding: 15px;
  border-radius: 4px;
}
.harticle-sec1-bad-title { margin: 0 0 10px 0; font-size: 14px; color: #dc3545; text-align:center;}

.harticle-sec1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}
.harticle-sec1-hl-green { color: #98c379; font-weight: bold; }
.harticle-sec1-hl-red { color: #e06c75; font-weight: bold; }
.harticle-sec1-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

articleタグ内の基本構造

<article>は「単体で完結する独立したコンテンツ」であるため、記事専用のヘッダーやフッターを持つことができる特徴があります。

<header>と<footer>は、ページ全体に対してだけでなく、特定のセクションや<article>ごとに何度でも使用できます。

  • <header>：記事の「大見出し（h1やh2）」「投稿日時」「執筆者名」などをまとめる役割。
  • <footer>：記事の「カテゴリ・タグのリスト」「関連記事へのリンク」「シェアボタン」などをまとめる役割。
🏗️ article内の美しいセマンティック構造
<header>
HTML5のセマンティクス
🕒 2026-04-09 | ✍️ 山田太郎

本記事ではarticleタグの内部構造について解説します。articleの中には、それ専用のヘッダーとフッターを持つことができます。

<footer>
🏷️ タグ：HTML, フロントエンド, SEO
🔗 この記事をシェアする
<!– SEOに強い、完璧な記事のマークアップ –>
<article>

  <!– 💡 記事の情報をまとめる –>
  <header>
    <h1>記事タイトル</h1>
    <time datetime=”2026-04-09″>2026年4月9日</time>
  </header>

  <p>記事の本文…</p>

  <!– 💡 記事のメタデータ（タグ等）をまとめる –>
  <footer>
    <ul class=”tags”>…</ul>
    <div class=”share”>…</div>
  </footer>

</article>
HTMLコード表示
<div class="harticle-sec2-wrapper">
  
  <div class="harticle-sec2-demo-area">
    <div class="harticle-sec2-box">
      <div class="harticle-sec2-label">🏗️ article内の美しいセマンティック構造</div>
      
      <div class="harticle-sec2-visual">
        <article class="harticle-sec2-article-wrap">
          
          <header class="harticle-sec2-header">
            <span class="harticle-sec2-tag-label"><header></span>
            <div style="margin:0 0 5px 0; font-size:16px;">HTML5のセマンティクス</div>
            <div style="font-size:11px; color:#666;">🕒 2026-04-09 | ✍️ 山田太郎</div>
          </header>

          <div class="harticle-sec2-body">
            <p style="margin:0; font-size:13px; color:#333; line-height:1.5;">
              本記事ではarticleタグの内部構造について解説します。articleの中には、それ専用のヘッダーとフッターを持つことができます。
            </p>
          </div>

          <footer class="harticle-sec2-footer">
            <span class="harticle-sec2-tag-label"><footer></span>
            <div style="font-size:11px; color:#0d6efd;">
              🏷️ タグ：HTML, フロントエンド, SEO
            </div>
            <div style="margin-top:5px; font-size:11px; background:#e9ecef; display:inline-block; padding:2px 5px; border-radius:2px;">
              🔗 この記事をシェアする
            </div>
          </footer>
          
        </article>
      </div>

      <div class="harticle-sec2-code">
        <!-- SEOに強い、完璧な記事のマークアップ --><br>
        <span class="harticle-sec2-hl-green"><article></span><br><br>
          <!-- 💡 記事の情報をまとめる --><br>
          <span class="harticle-sec2-hl-blue"><header></span><br>
            <h1>記事タイトル</h1><br>
            <time datetime="2026-04-09">2026年4月9日</time><br>
          <span class="harticle-sec2-hl-blue"></header></span><br><br>
          <p>記事の本文...</p><br><br>
          <!-- 💡 記事のメタデータ（タグ等）をまとめる --><br>
          <span class="harticle-sec2-hl-blue"><footer></span><br>
            <ul class="tags">...</ul><br>
            <div class="share">...</div><br>
          <span class="harticle-sec2-hl-blue"></footer></span><br><br>
        <span class="harticle-sec2-hl-green"></article></span>
      </div>
    </div>
  </div>
</div>
CSSコード表示
.harticle-sec2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.harticle-sec2-demo-area {
  display: flex;
  justify-content: center;
}
.harticle-sec2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 550px;
  border-radius: 4px;
}
.harticle-sec2-label { font-size: 15px; font-weight: bold; margin-bottom: 15px; color: #333; }

.harticle-sec2-visual {
  background-color: #e9ecef;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* 記事全体の枠 */
.harticle-sec2-article-wrap {
  background-color: #fff;
  border: 2px solid #198754;
  border-radius: 4px;
  position: relative;
}

/* 各セクションのスタイル */
.harticle-sec2-header {
  background-color: #e7f1ff;
  padding: 15px;
  border-bottom: 1px dashed #b6d4fe;
  position: relative;
}
.harticle-sec2-body {
  padding: 15px;
}
.harticle-sec2-footer {
  background-color: #f8f9fa;
  padding: 15px;
  border-top: 1px dashed #dee2e6;
  position: relative;
}

/* タグ名を目立たせるラベル */
.harticle-sec2-tag-label {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 10px;
  font-weight: bold;
  color: #fff;
  background-color: #6c757d;
  padding: 2px 5px;
  border-radius: 3px;
}

.harticle-sec2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.harticle-sec2-hl-green { color: #98c379; font-weight: bold; }
.harticle-sec2-hl-blue { color: #61afef; font-weight: bold; }

articleタグと他のレイアウトタグの違い

HTML5の学習を進めていく中で、初心者が頭を悩ませるのが「レイアウト用セマンティックタグの使い分け」です。

特に、見た目上はどれも四角いブロック（箱）になるため、「結局どれを使えばいいの？」と混乱します。

ここでは、実務の現場でも議論になりやすいarticleとsectionの違い、main、aside、divタグとの境界線と連携方法を解説します。

articleタグと他のレイアウトタグの違い
  • articleとsectionの違いと使い分け
  • main・div・asideタグとの使い分け

articleとsectionの違いと使い分け

「articleとsection」は、コーディングにおいて最も質問が多いテーマです。

どちらも「コンテンツのまとまり」を表しますが、検索エンジンに伝える意味合いは異なります。

  • <article>
    ブログの1記事、ニュースの1件など「単体で別のサイトに転載されても意味が成立するもの」に使います。
  • <section>
    事業内容の1つ、記事の中の第1章など「大きなテーマの中にある見出しを伴う1つの区画（章・節）」に使います。

これらは互いに入れ子にできます。

「ブログ記事（article）の中に、いくつかの章（section）がある」パターン、「最新ニュースエリア（section）の中に、個別のニュース記事（article）が並んでいる」パターンの両方が実務で使われます。

🧩 articleとsectionの正しい入れ子構造

パターン1：独立した記事（article）の中の章（section）

HTML完全ガイド（article）
第1章：タグの基礎（section）

HTMLタグの基本的な書き方について解説します…

第2章：属性の使い方（section）

classやidなどの属性の付与方法について…

パターン2：特定の区画（section）の中に並ぶ記事（article）

最新のお知らせ（section）
2026.04.09
サイトリニューアル（article）
2026.04.01
春のキャンペーン（article）
<!– 💡 パターン1：記事の「章」として分ける –>
<article>
  <h1>記事タイトル</h1>
  <section><h2>第1章</h2>…</section>
  <section><h2>第2章</h2>…</section>
</article>

<!– 💡 パターン2：記事の「リスト」として並べる –>
<section>
  <h2>最新ニュース</h2>
  <article><h3>ニュースA</h3></article>
  <article><h3>ニュースB</h3></article>
</section>
HTMLコード表示
<div class="harticle-diff1-wrapper">
  
  <div class="harticle-diff1-demo-area">
    <div class="harticle-sec3-box">
      <div class="harticle-diff1-label">🧩 articleとsectionの正しい入れ子構造</div>
      
      <div class="harticle-diff1-visual">
        <p style="font-size:12px; color:#0d6efd; font-weight:bold; margin:0 0 5px 0;">パターン1：独立した記事（article）の中の章（section）</p>
        <article class="harticle-diff1-mock-article">
          <div style="margin:0 0 10px 0;">HTML完全ガイド（article）</div>
          
          <section class="harticle-diff1-mock-section">
            <div style="margin:0 0 5px 0; color:#333;">第1章：タグの基礎（section）</div>
            <p style="font-size:11px; margin:0;">HTMLタグの基本的な書き方について解説します...</p>
          </section>
          
          <section class="harticle-diff1-mock-section" style="margin-top:10px;">
            <div style="margin:0 0 5px 0; color:#333;">第2章：属性の使い方（section）</div>
            <p style="font-size:11px; margin:0;">classやidなどの属性の付与方法について...</p>
          </section>
        </article>

        <p style="font-size:12px; color:#198754; font-weight:bold; margin:20px 0 5px 0;">パターン2：特定の区画（section）の中に並ぶ記事（article）</p>
        <section class="harticle-diff1-mock-news-section">
          <div style="margin:0 0 10px 0;">最新のお知らせ（section）</div>
          
          <div style="display:flex; gap:10px;">
            <article class="harticle-diff1-mock-card">
              <span style="font-size:10px; color:#666;">2026.04.09</span>
              <div style="margin:5px 0; font-size:12px;">サイトリニューアル（article）</div>
            </article>
            <article class="harticle-diff1-mock-card">
              <span style="font-size:10px; color:#666;">2026.04.01</span>
              <div style="margin:5px 0; font-size:12px;">春のキャンペーン（article）</div>
            </article>
          </div>
        </section>
      </div>

      <div class="harticle-diff1-code">
        <!-- 💡 パターン1：記事の「章」として分ける --><br>
        <span class="harticle-diff1-hl-blue"><article></span><br>
          <h1>記事タイトル</h1><br>
          <span class="harticle-diff1-hl-green"><section></span><h2>第1章</h2>...<span class="harticle-diff1-hl-green"></section></span><br>
          <span class="harticle-diff1-hl-green"><section></span><h2>第2章</h2>...<span class="harticle-diff1-hl-green"></section></span><br>
        <span class="harticle-diff1-hl-blue"></article></span><br><br>
        <!-- 💡 パターン2：記事の「リスト」として並べる --><br>
        <span class="harticle-diff1-hl-green"><section></span><br>
          <h2>最新ニュース</h2><br>
          <span class="harticle-diff1-hl-blue"><article></span><h3>ニュースA</h3><span class="harticle-diff1-hl-blue"></article></span><br>
          <span class="harticle-diff1-hl-blue"><article></span><h3>ニュースB</h3><span class="harticle-diff1-hl-blue"></article></span><br>
        <span class="harticle-diff1-hl-green"></section></span>
      </div>
    </div>
  </div>
</div>
CSSコード表示
.harticle-diff1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.harticle-diff1-demo-area {
  display: flex;
  justify-content: center;
}

.harticle-sec3-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 550px;
  border-radius: 4px;
}

.harticle-diff1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.harticle-diff1-visual {
  background-color: #e9ecef;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* パターン1の装飾 */
.harticle-diff1-mock-article {
  background-color: #cfe2ff;
  border: 2px solid #0d6efd;
  padding: 15px;
  border-radius: 4px;
  color: #084298;
}

.harticle-diff1-mock-section {
  background-color: #fff;
  border: 1px dashed #0d6efd;
  padding: 10px;
  border-radius: 4px;
}

/* パターン2の装飾 */
.harticle-diff1-mock-news-section {
  background-color: #d1e7dd;
  border: 2px solid #198754;
  padding: 15px;
  border-radius: 4px;
  color: #0f5132;
}

.harticle-diff1-mock-card {
  flex: 1;
  background-color: #fff;
  border: 1px solid #198754;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.harticle-diff1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}

.harticle-diff1-hl-blue {
  color: #61afef;
  font-weight: bold;
}

.harticle-diff1-hl-green {
  color: #98c379;
  font-weight: bold;
}

main・div・asideタグとの使い分け

Webページの全体的なレイアウトを組む際、「main・section・article・aside」という主要なタグに加え、「articleとdiv」といった意味を持たないタグとの使い分けが重要になります。

  • <main>
    ページの「主役」となるコンテンツ全体を囲みます。
    1ページにつき1回しか使えません。
    <main>の中に<article>や<section>が入るのが通常です。
  • <aside>
    メインの文脈から外れた「補足情報」や「サイドバー」です。
    記事に関連する補足なら<article>の中に、サイト全体のサイドバーなら<article>の外に置きます。
  • <div>
    「ただの箱」です。
    意味を持たせたくないが、CSSでフレックスボックス（横並び）にしたり、背景色をつけたり、余白を調整したりする「デザイン・レイアウト用のラッパー」として使います。
🏗️ main・article・aside・divの完全な連携
<main>
<article>
Web制作のベストプラクティス
<section>

正しいマークアップは…

<!– 💡 ページに1つの主役 –>
<main>

  <!– 💡 CSSで横並びにするための「ただの箱」 –>
  <div class=”flex-wrapper”>

    <!– 独立したコンテンツ –>
    <article>
      <section>第1章…</section>
    </article>

    <!– メイン文脈から外れた補足・サイドバー –>
    <aside>
      広告や最新記事リスト…
    </aside>

  </div>
</main>

※「意味を持たせたい時はarticleやsection」「ただデザインを整えたいだけの時はdiv」と割り切ると、迷いがなくなります。

HTMLコード表示
<div class="harticle-diff2-wrapper">
  
  <div class="harticle-diff2-demo-area">
    <div class="harticle-sec3-box">
      <div class="harticle-diff2-label">🏗️ main・article・aside・divの完全な連携</div>
      
      <div class="harticle-diff2-visual">
        <div class="harticle-diff2-mock-main">
          <span class="harticle-diff2-tag-badge harticle-diff2-badge-main"><main></span>
          
          <div style="display:flex; gap:10px; margin-top:20px;">
            
            <article class="harticle-diff2-mock-article">
              <span class="harticle-diff2-tag-badge harticle-diff2-badge-article"><article></span>
              <div style="margin:20px 0 10px 0; font-size:14px;">Web制作のベストプラクティス</div>
              
              <section class="harticle-diff2-mock-section">
                <span class="harticle-diff2-tag-badge harticle-diff2-badge-section"><section></span>
                <p style="margin:15px 0 0 0; font-size:11px;">正しいマークアップは...</p>
              </section>
            </article>

            <aside class="harticle-diff2-mock-aside">
              <span class="harticle-diff2-tag-badge harticle-diff2-badge-aside"><aside></span>
              <p style="margin:20px 0 0 0; font-size:11px;">📌 最新記事一覧</p>
              <p style="margin:5px 0 0 0; font-size:11px;">📢 スポンサー広告</p>
            </aside>

          </div>
        </div>
      </div>

      <div class="harticle-diff2-code">
        <!-- 💡 ページに1つの主役 --><br>
        <span class="harticle-diff2-hl-main"><main></span><br><br>
          <!-- 💡 CSSで横並びにするための「ただの箱」 --><br>
          <span class="harticle-diff2-hl-div"><div class="flex-wrapper"></span><br><br>
            <!-- 独立したコンテンツ --><br>
            <span class="harticle-diff2-hl-article"><article></span><br>
              <span class="harticle-diff2-hl-section"><section></span>第1章...<span class="harticle-diff2-hl-section"></section></span><br>
            <span class="harticle-diff2-hl-article"></article></span><br><br>
            <!-- メイン文脈から外れた補足・サイドバー --><br>
            <span class="harticle-diff2-hl-aside"><aside></span><br>
              広告や最新記事リスト...<br>
            <span class="harticle-diff2-hl-aside"></aside></span><br><br>
          <span class="harticle-diff2-hl-div"></div></span><br>
        <span class="harticle-diff2-hl-main"></main></span>
      </div>
      <p class="harticle-diff2-note">※「意味を持たせたい時はarticleやsection」「ただデザインを整えたいだけの時はdiv」と割り切ると、迷いがなくなります。</p>
    </div>
  </div>
</div>
CSSコード表示
.harticle-diff2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.harticle-diff2-demo-area {
  display: flex;
  justify-content: center;
}

.harticle-diff2-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.harticle-diff2-visual {
  background-color: #e9ecef;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* 共通バッジスタイル */
.harticle-diff2-tag-badge {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 10px;
  font-weight: bold;
  color: #fff;
  padding: 2px 6px;
  border-bottom-right-radius: 4px;
}

/* mainモック */
.harticle-diff2-mock-main {
  position: relative;
  background-color: #f8f9fa;
  border: 2px solid #343a40;
  padding: 15px;
  border-radius: 4px;
}

.harticle-diff2-badge-main {
  background-color: #343a40;
}

/* articleモック */
.harticle-diff2-mock-article {
  flex: 2;
  position: relative;
  background-color: #cfe2ff;
  border: 2px solid #0d6efd;
  padding: 15px;
  border-radius: 4px;
  color: #084298;
}

.harticle-diff2-badge-article {
  background-color: #0d6efd;
}

/* sectionモック */
.harticle-diff2-mock-section {
  position: relative;
  background-color: #fff;
  border: 1px dashed #0d6efd;
  padding: 10px;
  border-radius: 4px;
}

.harticle-diff2-badge-section {
  background-color: #6c757d;
}

/* asideモック */
.harticle-diff2-mock-aside {
  flex: 1;
  position: relative;
  background-color: #d1e7dd;
  border: 2px solid #198754;
  padding: 10px;
  border-radius: 4px;
  color: #0f5132;
}

.harticle-diff2-badge-aside {
  background-color: #198754;
}

.harticle-diff2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}

.harticle-diff2-hl-main {
  color: #e06c75;
  font-weight: bold;
}

.harticle-diff2-hl-div {
  color: #abb2bf;
  font-weight: bold;
}

.harticle-diff2-hl-article {
  color: #61afef;
  font-weight: bold;
}

.harticle-diff2-hl-section {
  color: #98c379;
  font-weight: bold;
}

.harticle-diff2-hl-aside {
  color: #d19a66;
  font-weight: bold;
}

.harticle-diff2-note {
  font-size: 12px;
  color: #666;
  margin-top: 10px;
  line-height: 1.5;
}

asideタグの使い方を詳しく知りたい人は「【HTML】asideタグの使い方：サイドバー実装やsectionとの違い」を一読ください。

また、divタグの使い方を詳しく知りたい人は「【HTML】divタグの使い方：横並びや中央寄せ・CSS装飾」を一読ください。

【HTML】asideタグの使い方：サイドバー実装やsectionとの違い
【HTML】divタグの使い方：横並びや中央寄せ・CSS装飾

articleタグの実践的な使い方とサンプルコード

ここからは、Webサイトを構築する際に<article>タグをどのように使うのか、具体的なコードを見ながら実践的なマークアップ手法を解説します。

実務において<article>タグは、大きく分けて「記事の個別ページ（詳細ページ）」と「記事の一覧ページ（カード型レイアウト）」の2つの場面で使用されます。

articleタグの実践的な使い方とサンプルコード
  • ブログやニュース記事本文のマークアップ例
  • CSSでおしゃれな記事カードのデザイン

ブログやニュース記事本文のマークアップ例

ブログ記事やニュースの「個別ページ」を作る際、ページ内容のほとんどは「独立した1つの記事」となるため、メインコンテンツ全体を<article>で囲むのが基本です。

HTML5の仕様では、独立したコンテンツである<article>の中には、記事の主題を表す見出し（基本的にh1またはh2）が最初に必要です。

見出しは本の「目次」と同じ役割を持つため、順番通り（h1→h2→h3）に階層構造を作ります。

📝 ブログ記事本文のマークアップ例
Webデザイン
articleタグの正しい使い方をマスターしよう

HTML5のセマンティックタグの中でも、特に重要なのが…

なぜマークアップが重要なのか

検索エンジンに正しい情報を伝えるためです。

<!– 💡 記事の個別ページの基本構造 –>
<article class=”post-container”>

  <!– ヘッダー（カテゴリ・日付・タイトル） –>
  <header>
    <div class=”meta”>…</div>
    <h1>記事のメインタイトル</h1>
  </header>

  <!– 本文（sectionで章ごとに分ける） –>
  <div class=”content”>
    <p>リード文…</p>
    <section>
      <h2>第1章の見出し</h2>
      <p>本文…</p>
    </section>
  </div>

</article>
HTMLコード表示
<div class="harticle-prac1-wrapper">
  
  <div class="harticle-prac1-demo-area">
    <div class="harticle-prac1-box">
      <div class="harticle-prac1-label">📝 ブログ記事本文のマークアップ例</div>
      
      <div class="harticle-prac1-visual">
        <article class="harticle-prac1-post">
          
          <header class="harticle-prac1-post-header">
            <div class="harticle-prac1-meta">
              <span class="harticle-prac1-category">Webデザイン</span>
              <time datetime="2026-04-09" class="harticle-prac1-date">2026.04.09</time>
            </div>
            <div class="harticle-prac1-post-title">articleタグの正しい使い方をマスターしよう</div>
          </header>

          <div class="harticle-prac1-post-content">
            <p>HTML5のセマンティックタグの中でも、特に重要なのが...</p>
            
            <section class="harticle-prac1-post-section">
              <div class="harticle-prac1-section-title">なぜマークアップが重要なのか</div>
              <p>検索エンジンに正しい情報を伝えるためです。</p>
            </section>
          </div>

        </article>
      </div>

      <div class="harticle-prac1-code">
        <!-- 💡 記事の個別ページの基本構造 --><br>
        <span class="harticle-prac1-hl-green"><article</span> class="post-container"<span class="harticle-prac1-hl-green">></span><br><br>
          <!-- ヘッダー（カテゴリ・日付・タイトル） --><br>
          <header><br>
            <div class="meta">...</div><br>
            <span class="harticle-prac1-hl-blue"><h1></span>記事のメインタイトル<span class="harticle-prac1-hl-blue"></h1></span><br>
          </header><br><br>
          <!-- 本文（sectionで章ごとに分ける） --><br>
          <div class="content"><br>
            <p>リード文...</p><br>
            <section><br>
              <span class="harticle-prac1-hl-blue"><h2></span>第1章の見出し<span class="harticle-prac1-hl-blue"></h2></span><br>
              <p>本文...</p><br>
            </section><br>
          </div><br><br>
        <span class="harticle-prac1-hl-green"></article></span>
      </div>
    </div>
  </div>
</div>
CSSコード表示
.harticle-prac1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.harticle-prac1-demo-area {
  display: flex;
  justify-content: center;
}

.harticle-prac1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 550px;
  border-radius: 4px;
}

.harticle-prac1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.harticle-prac1-visual {
  background-color: #e9ecef;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* 記事全体の装飾 */
.harticle-prac1-post {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* ヘッダー部分 */
.harticle-prac1-post-header {
  background-color: #084298;
  color: #fff;
  padding: 20px;
}

.harticle-prac1-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.harticle-prac1-category {
  background-color: #fff;
  color: #084298;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 20px;
}

.harticle-prac1-date {
  font-size: 12px;
  color: #cfe2ff;
}

.harticle-prac1-post-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
}

/* 本文部分 */
.harticle-prac1-post-content {
  padding: 20px;
  color: #333;
  font-size: 14px;
  line-height: 1.6;
}

.harticle-prac1-post-section {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed #dee2e6;
}

.harticle-prac1-section-title {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #0d6efd;
  border-left: 4px solid #0d6efd;
  padding-left: 8px;
}

.harticle-prac1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}

.harticle-prac1-hl-green {
  color: #98c379;
  font-weight: bold;
}

.harticle-prac1-hl-blue {
  color: #61afef;
  font-weight: bold;
}

h1～h6タグの見出しの使い方を詳しく知りたい人は「【html】見出しタグの使い方：h1~h6の使い分けとデザイン例」を一読ください。

【html】見出しタグの使い方：h1~h6の使い分けとデザイン例

CSSでおしゃれな記事カードのデザイン

トップページやカテゴリページに記事を並べる際、画像・タイトル・日付などを四角くまとめた「カード型デザイン」がWebサイトの主流です。

一つひとつのカードは「独立した記事のプレビュー」であるため、<article>タグを使用するのが最適です。

デザインを当てる際は、例えば<article class="post-card">のようにクラス名をつけます。

HTML5の仕様では、「<a>タグ（インライン要素）の中に<article>や<div>（ブロック要素）を入れても良い」というルールがあります。

そのため、カード全体を<a href="...">で丸ごと囲むことで、カードのどこを押してもクリックできる使いやすいUIを実現します。

🖼️ aタグで丸ごと囲むオシャレな記事カード

👇 カード全体がクリック可能です（マウスを乗せてみてください）

📝
HTML/CSS
セマンティックHTML完全ガイド

articleとsectionの使い分けで、検索エンジンに強いサイトを作る方法を解説。
<!– 💡 記事の一覧は、カード全体をaタグで囲むとUXが高い –>
<a href=”記事のURL” class=”card-link”>
  <!– 必ず専用のクラスを付与する –>
  <article class=”post-card”>
    <img src=”thumb.jpg” alt=””>
    <div class=”card-body”>
      <span>カテゴリ</span>
      <h3>記事タイトル</h3>
    </div>
  </article>
</a>

/* 💡 カードのCSS（ホバーエフェクト） */
.post-card {
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card-link:hover .post-card {
  transform: translateY(-5px); /* 少し上に浮く */
  box-shadow: 0 8px 16px rgba(0,0,0,0.15); /* 影を濃くする */
}
HTMLコード表示
<div class="harticle-prac2-wrapper">
  
  <div class="harticle-prac2-demo-area">
    <div class="harticle-prac2-box">
      <div class="harticle-prac2-label">🖼️ aタグで丸ごと囲むオシャレな記事カード</div>
      
      <div class="harticle-prac2-visual">
        <p style="font-size:12px; color:#666; margin:0 0 10px 0; font-weight:bold;">👇 カード全体がクリック可能です（マウスを乗せてみてください）</p>
        
        <div class="harticle-prac2-card-grid">
          
          <a href="#" class="harticle-prac2-card-link">
            <article class="harticle-prac2-card">
              <div class="harticle-prac2-card-thumb" style="background-color: #cfe2ff;">
                <span style="font-size: 24px;">📝</span>
              </div>
              
              <div class="harticle-prac2-card-body">
                <div class="harticle-prac2-card-meta">
                  <span class="harticle-prac2-card-tag">HTML/CSS</span>
                  <time class="harticle-prac2-card-date">2026.04.09</time>
                </div>
                <div class="harticle-prac2-card-title">セマンティックHTML完全ガイド</div>
                <p class="harticle-prac2-card-desc">articleとsectionの使い分けで、検索エンジンに強いサイトを作る方法を解説。</p>
              </div>
            </article>
          </a>

        </div>
      </div>

      <div class="harticle-prac2-code">
        <!-- 💡 記事の一覧は、カード全体をaタグで囲むとUXが高い --><br>
        <span class="harticle-prac2-hl-blue"><a href="記事のURL" class="card-link"></span><br>
          <!-- 必ず専用のクラスを付与する --><br>
          <span class="harticle-prac2-hl-green"><article class="post-card"></span><br>
            <img src="thumb.jpg" alt=""><br>
            <div class="card-body"><br>
              <span>カテゴリ</span><br>
              <h3>記事タイトル</h3><br>
            </div><br>
          <span class="harticle-prac2-hl-green"></article></span><br>
        <span class="harticle-prac2-hl-blue"></a></span><br><br>
        /* 💡 カードのCSS（ホバーエフェクト） */<br>
        <span class="harticle-prac2-hl-green">.post-card</span> {<br>
          transition: transform 0.3s, box-shadow 0.3s;<br>
          box-shadow: 0 2px 4px rgba(0,0,0,0.1);<br>
        }<br>
        <span class="harticle-prac2-hl-blue">.card-link:hover</span> <span class="harticle-prac2-hl-green">.post-card</span> {<br>
          transform: translateY(-5px); /* 少し上に浮く */<br>
          box-shadow: 0 8px 16px rgba(0,0,0,0.15); /* 影を濃くする */<br>
        }
      </div>
    </div>
  </div>
</div>
CSSコード表示
.harticle-prac2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.harticle-prac2-demo-area {
  display: flex;
  justify-content: center;
}

.harticle-prac2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}

.harticle-prac2-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.harticle-prac2-visual {
  background-color: #e9ecef;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

/* カード一覧のレイアウト（ここでは1枚ですが） */
.harticle-prac2-card-grid {
  display: grid;
  grid-template-columns: 1fr;
}

/* aタグのデフォルトスタイルをリセット */
.harticle-prac2-card-link {
  text-decoration: none;
  color: inherit;
  display: block; /* 全体をクリック可能にする */
}

/* 記事カード本体のデザイン */
.harticle-prac2-card {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* ホバー用のアニメーション */
}

/* ホバー時の浮き上がりエフェクト */
.harticle-prac2-card-link:hover .harticle-prac2-card {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.harticle-prac2-card-thumb {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* カードのテキストエリア */
.harticle-prac2-card-body {
  padding: 15px;
}

.harticle-prac2-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.harticle-prac2-card-tag {
  background-color: #e7f1ff;
  color: #0d6efd;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 4px;
}

.harticle-prac2-card-date {
  font-size: 11px;
  color: #6c757d;
}

.harticle-prac2-card-title {
  margin: 0 0 10px 0;
  font-size: 15px;
  color: #212529;
  line-height: 1.4;
}

/* リンクホバー時にタイトルに下線をつけるアクセント */
.harticle-prac2-card-link:hover .harticle-prac2-card-title {
  text-decoration: underline;
  color: #0d6efd;
}

.harticle-prac2-card-desc {
  margin: 0;
  font-size: 12px;
  color: #6c757d;
  line-height: 1.5;
}

.harticle-prac2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}

.harticle-prac2-hl-blue {
  color: #61afef;
  font-weight: bold;
}

.harticle-prac2-hl-green {
  color: #98c379;
  font-weight: bold;
}

リンクである<a>タグの使い方を詳しく知りたい人は「【html&css】aタグ（リンク）の使い方とWebデザインによる装飾」を一読ください。

【html&css】aタグ（リンク）の使い方とWebデザインによる装飾

コピペで使える！articleのHTML/CSSテンプレート

Webサイト制作において、articleタグのテンプレートといったコードのひな形をストックすることは、開発スピードを上げる武器になります。

ここでは、実務に投入できるブログの個別記事用テンプレート、トップページなどで使える記事一覧用のリスト型テンプレートをコピペ可能なHTML/CSSのセットで提供します。

articleのHTML/CSSテンプレート
  • ブログの個別記事用テンプレート
  • 記事一覧（アーカイブ）用のリスト型テンプレート

ブログの個別記事用テンプレート

ブログやニュースの「個別ページ（詳細ページ）」を構築するためのスタンダードでSEOに強いテンプレートです。

記事の横幅を制限したい場合は、width ではなくmax-width: 800px;（最大幅） を使用し、さらにwidth: 100%;を組み合わせます。

これにより、パソコンでは800pxで止まり、スマホでは画面幅に合わせて自動的に縮むレスポンシブデザインが完成します。

フロントエンド
セマンティックHTMLの実践テンプレート集
👨‍💻 執筆者：山田 太郎

この記事では、ブログ構築にそのまま使えるHTML5のモダンなテンプレートをご紹介します。

なぜarticleタグを使うのか

コンテンツの独立性を検索エンジンに正しく伝えるためです。正しいマークアップはSEOの基本となります。

HTMLコード表示
<div class="harticle-tpl1-wrapper">
  
  <div class="harticle-tpl1-demo-area">
    
    <article class="harticle-tpl1-post">
      
      <header class="harticle-tpl1-header">
        <div class="harticle-tpl1-meta">
          <span class="harticle-tpl1-category">フロントエンド</span>
          <time datetime="2026-04-09" class="harticle-tpl1-date">2026.04.09</time>
        </div>
        <div class="harticle-tpl1-title">セマンティックHTMLの実践テンプレート集</div>
        <div class="harticle-tpl1-author">
          <span class="harticle-tpl1-avatar">👨‍💻</span> 執筆者：山田 太郎
        </div>
      </header>

      <div class="harticle-tpl1-body">
        <p class="harticle-tpl1-lead">
          この記事では、ブログ構築にそのまま使えるHTML5のモダンなテンプレートをご紹介します。
        </p>
        
        <section class="harticle-tpl1-section">
          <div class="harticle-prac1-h2">なぜarticleタグを使うのか</div>
          <p>コンテンツの独立性を検索エンジンに正しく伝えるためです。正しいマークアップはSEOの基本となります。</p>
        </section>
      </div>

      <footer class="harticle-tpl1-footer">
        <div class="harticle-tpl1-tags">
          <span class="harticle-tpl1-tag-icon">🏷️</span>
          <a href="#" class="harticle-tpl1-tag">HTML</a>
          <a href="#" class="harticle-tpl1-tag">CSS</a>
          <a href="#" class="harticle-tpl1-tag">テンプレート</a>
        </div>
        <div class="harticle-tpl1-share">
          <button class="harticle-tpl1-share-btn">🔗 記事をシェアする</button>
        </div>
      </footer>

    </article>

  </div>
</div>
CSSコード表示
.harticle-tpl1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.harticle-tpl1-demo-area {
  display: flex;
  justify-content: center;
}

/* 記事全体のコンテナ（レスポンシブ対応） */
.harticle-tpl1-post {
  background-color: #ffffff;
  width: 100%;
  max-width: 700px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  overflow: hidden;
}

/* ヘッダー領域 */
.harticle-tpl1-header {
  background-color: #f1f3f5;
  padding: 30px;
  border-bottom: 1px solid #dee2e6;
}

.harticle-tpl1-meta {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.harticle-tpl1-category {
  background-color: #0d6efd;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 4px;
}

.harticle-tpl1-date {
  font-size: 13px;
  color: #6c757d;
}

.harticle-tpl1-title {
  margin: 0 0 15px 0;
  font-size: 22px;
  color: #212529;
  line-height: 1.4;
}

.harticle-tpl1-author {
  font-size: 13px;
  color: #495057;
  display: flex;
  align-items: center;
  gap: 5px;
}

.harticle-tpl1-avatar {
  font-size: 18px;
}

/* 本文領域 */
.harticle-tpl1-body {
  padding: 30px;
  color: #333333;
  line-height: 1.7;
}

.harticle-tpl1-lead {
  font-size: 15px;
  margin: 0 0 20px 0;
}

.harticle-tpl1-section {
  margin-top: 30px;
}

.harticle-prac1-h2 {
  font-size: 18px;
  color: #212529;
  border-bottom: 2px solid #0d6efd;
  padding-bottom: 8px;
  margin: 0 0 15px 0;
}

/* フッター領域 */
.harticle-tpl1-footer {
  padding: 20px 30px;
  background-color: #f8f9fa;
  border-top: 1px dashed #dee2e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* スマホで落ちるようにする */
  gap: 15px;
}

.harticle-tpl1-tags {
  display: flex;
  align-items: center;
  gap: 8px;
}

.harticle-tpl1-tag-icon {
  font-size: 14px;
}

.harticle-tpl1-tag {
  color: #495057;
  font-size: 12px;
  text-decoration: none;
  background-color: #e9ecef;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.harticle-tpl1-tag:hover {
  background-color: #dee2e6;
}

.harticle-tpl1-share-btn {
  background-color: #ffffff;
  border: 1px solid #ced4da;
  color: #495057;
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

.harticle-tpl1-share-btn:hover {
  background-color: #f1f3f5;
  border-color: #adb5bd;
}

max-width（最大幅）とmin-width（最小幅）の使い方を詳しく知りたい人は「【html&css】min-widthとmax-widthの使い方【レスポンシブ対応】」を一読ください。

【html&css】min-widthとmax-widthの使い方【レスポンシブ対応】

記事一覧（アーカイブ）用のリスト型テンプレート

トップページやカテゴリーページで、「記事一覧」として複数の記事を並べる際に使われるリスト型のテンプレートです。

正しい構造は、「<ul>の中の<li>の中に、<article>を入れる」です。

また、実務のリスト型デザインではFlexbox（display: flex;）を使って「左側にサムネイル画像」「右側にテキスト情報」を配置するレイアウトがよいです。

最新の記事一覧
HTMLコード表示
<div class="harticle-tpl2-wrapper">
  
  <div class="harticle-tpl2-demo-area">
    
    <section class="harticle-tpl2-archive">
      <div class="harticle-tpl2-archive-title">最新の記事一覧</div>
      
      <ul class="harticle-tpl2-list">
        
        <li class="harticle-tpl2-item">
          <a href="#" class="harticle-tpl2-link">
            <article class="harticle-tpl2-card">
              <div class="harticle-tpl2-thumb">
                <span class="harticle-tpl2-thumb-icon">🎨</span>
              </div>
              <div class="harticle-tpl2-content">
                <div class="harticle-tpl2-meta">
                  <span class="harticle-tpl2-label">CSS</span>
                  <time class="harticle-tpl2-date">2026.04.08</time>
                </div>
                <div class="harticle-tpl2-title">Flexboxを使った最新のレイアウト手法</div>
                <p class="harticle-tpl2-desc">モダンなWebデザインに欠かせないFlexboxの基礎から応用までを解説します。</p>
              </div>
            </article>
          </a>
        </li>

        <li class="harticle-tpl2-item">
          <a href="#" class="harticle-tpl2-link">
            <article class="harticle-tpl2-card">
              <div class="harticle-tpl2-thumb" style="background-color: #d1e7dd;">
                <span class="harticle-tpl2-thumb-icon">⚙️</span>
              </div>
              <div class="harticle-tpl2-content">
                <div class="harticle-tpl2-meta">
                  <span class="harticle-tpl2-label" style="background-color: #198754;">JavaScript</span>
                  <time class="harticle-tpl2-date">2026.04.05</time>
                </div>
                <div class="harticle-tpl2-title">動的なWebサイトの作り方</div>
                <p class="harticle-tpl2-desc">ユーザーのアクションに合わせて画面を変化させるためのJavaScript入門。</p>
              </div>
            </article>
          </a>
        </li>

      </ul>
    </section>

  </div>
</div>
CSSコード表示
.harticle-tpl2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.harticle-tpl2-demo-area {
  display: flex;
  justify-content: center;
}

/* アーカイブセクション全体 */
.harticle-tpl2-archive {
  width: 100%;
  max-width: 600px;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.harticle-tpl2-archive-title {
  margin: 0 0 20px 0;
  font-size: 18px;
  color: #212529;
  border-bottom: 2px solid #e9ecef;
  padding-bottom: 10px;
}

/* リストの初期化 */
.harticle-tpl2-list {
  list-style: none; /* 点を消す */
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px; /* 記事と記事の隙間 */
}

.harticle-tpl2-item {
  margin: 0;
  padding: 0;
}

/* リンクをブロック化 */
.harticle-tpl2-link {
  text-decoration: none;
  display: block;
  color: inherit;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  transition: all 0.2s ease;
  overflow: hidden; /* 角丸からはみ出ないように */
}

/* ホバー時のアクション */
.harticle-tpl2-link:hover {
  border-color: #0d6efd;
  box-shadow: 0 4px 12px rgba(13,110,253,0.1);
  transform: translateY(-2px);
}

/* articleカード全体（Flexboxで横並び） */
.harticle-tpl2-card {
  display: flex;
  align-items: stretch; /* 高さを揃える */
  background-color: #ffffff;
}

/* 左側のサムネイル */
.harticle-tpl2-thumb {
  flex-shrink: 0; /* 縮まないようにする */
  width: 120px;
  background-color: #cfe2ff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.harticle-tpl2-thumb-icon {
  font-size: 32px;
}

/* 右側のテキストコンテンツ */
.harticle-tpl2-content {
  padding: 15px;
  flex: 1; /* 残りの幅をすべて使う */
}

.harticle-tpl2-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.harticle-tpl2-label {
  font-size: 10px;
  font-weight: bold;
  color: #ffffff;
  background-color: #0d6efd;
  padding: 2px 6px;
  border-radius: 2px;
}

.harticle-tpl2-date {
  font-size: 11px;
  color: #6c757d;
}

.harticle-tpl2-title {
  margin: 0 0 8px 0;
  font-size: 15px;
  color: #212529;
  line-height: 1.4;
}

/* タイトルにホバーエフェクト（任意） */
.harticle-tpl2-link:hover .harticle-tpl2-title {
  color: #0d6efd;
}

.harticle-tpl2-desc {
  margin: 0;
  font-size: 12px;
  color: #6c757d;
  line-height: 1.5;
}

displayプロパティの使い方を詳しく知りたい人は「【html&css】displayの種類は？flexやinline-blockの違い」を一読ください。

【html&css】displayの種類は？flexやinline-blockの違い

まとめ

分かりやすいようにまとめを記載します。

本記事のまとめ
  • 基本定義
    単独で切り取って別サイト（RSS等）に転載しても、意味が成立する独立したコンテンツを示す。
  • 主な用途
    ブログの個別記事、ニュースの1件、フォーラムの投稿、記事一覧の各カード部分など。
  • 内部構造
    記事専用の<header>や<footer>を内部に持つことができる。
  • sectionとの違い
    sectionは記事やページ内の「章・節」、articleは「完結したコンテンツ全体」として使い分ける。
  • divとの違い
    レイアウトや横並び等のデザイン目的で箱を作る場合はdivを使用し、articleは意味付けのために使用する。
  • SEOへの役割
    検索エンジン（クローラー）に対して、ページの主要な記事部分がどこであるかを正確に伝達する。

よくある質問（FAQ）

articleタグは何のために使うタグですか？

その部分だけを切り取っても「独立したコンテンツ」として意味が成立する要素をマークアップ（意味付け）するために使います。

具体的には、ブログの個別記事、ニュースサイトの1つのニュース、掲示板の1つの投稿などが該当します。

「RSSリーダーや他のサイトにここだけ転載されたとして、読者は内容を理解できるか？」を基準に判断すると分かりやすいです。

articleタグとsectionタグの違いは何ですか？

「コンテンツの独立性」が異なります。

articleは、単体で完結する独立したコンテンツ（例：ブログの1記事）です。

sectionは、大きなテーマの中にある「章」や「節」（例：ブログ記事の中の第1章）を指します。

どちらもコンテンツのまとまりですが、切り取って単独で成立するかどうかで使い分けます。

1つのページ内にarticleタグを複数回使っても問題ないですか？

はい、全く問題ありません。

むしろ推奨されるケースが多いです。

例えば、ブログのトップページやカテゴリページで最新記事一覧を表示する場合、並んでる一つ一つの記事カードは独立したコンテンツのプレビューであるため、<article>タグで囲むのが正しい使い方です。

divタグとarticleタグはどう使い分ければいいですか？

検索エンジンに「意味」を伝えたいかどうかで使い分けます。

<article>は検索エンジンに対して「ここが記事の本体です」と明確な意味を伝えるタグです。

<div>は「意味を持たない箱」です。

横並びにしたい、余白を開けたい、背景色をつけたいといったデザインやレイアウトの都合で要素を囲みたい場合は<div>を使います。

articleタグの中にheaderやfooterを入れてもいいですか？

はい、SEOの観点からも入れることが推奨されています。

<header>や<footer>は、ページ全体で1回しか使えないわけではありません。

独立したコンテンツである<article>の中に、記事専用のタイトル・投稿日をまとめた<header>、タグ・シェアボタンをまとめた<footer>を配置することで、検索エンジンが記事構造を正確に理解できます。

HTML&CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次