HTMLのidとclassの違い・使い分けと構造タグの基本

カテゴリー: 初級 タグ: , ,

はじめに

HTMLを書くときによく迷うのが「idとclassの使い分け」そして「構造タグ（header, main, section, articleなど）の正しい使い方」です。今回はそれぞれの役割や実務的な使い分けの指針を解説します。

idとclassの違い

id属性

  • ページ内で一意（1ページ内で同じidは1つだけ）
  • 主な用途
    • JavaScriptで特定要素を取得
    • ページ内リンクのアンカー（<a href="#contact"> など）
<div id="contact">
  <h2>お問い合わせ</h2>
</div>

class属性

  • 複数の要素で共有可能
  • 主な用途
    • CSSで共通デザインを適用
    • 複数要素をまとめて扱う
<div class="card">
  <h3>商品タイトル</h3>
  <p>商品説明</p>
</div>

使い分けの指針

  • デザインやレイアウトのスタイル指定 → class
  • ページ内で唯一の要素や目印 → id

ブロックにはidをつけるべき？

「ブロックにはidをつけた方がいいのでは？」と考える方も多いでしょう。
結論から言えば、主要なセクションやナビゲーションの目印となるブロックにはidをつけるのがおすすめです。

idをブロックにつけるメリット

  • ページ内リンクで移動しやすくなる
  • JavaScriptで一意に取得できる
  • コードを見たときの目印になる

注意点

  • idは一意である必要があるため、同じページに複数使うとバグの原因になる
  • CSSでidに依存しすぎると再利用性が下がる

実務的な運用

  • セクション単位（about, service, contact など）にはidを付与
  • 再利用する小ブロックやデザイン要素はclassで管理
<main>
  <section id="about" class="section section-about">
    <h2>私たちについて</h2>
    <p>会社概要や理念...</p>
  </section>

  <section id="service" class="section section-service">
    <h2>サービス</h2>
    <div class="card">サービスA</div>
    <div class="card">サービスB</div>
  </section>

  <section id="contact" class="section section-contact">
    <h2>お問い合わせ</h2>
    <form>...</form>
  </section>
</main>

構造タグの正しい使い方

よく使う構造タグ

  • <header>：ページやセクションのヘッダー部分
  • <main>：ページの主要コンテンツ（1ページに1つ）
  • <section>：意味を持つまとまり
  • <article>：独立して成立する記事や投稿
  • <aside>：補足情報（広告やサイドバーなど）
  • <footer>：ページやセクションのフッター部分

実例コード

<body>
  <header>
    <h1>サイトタイトル</h1>
    <nav>...</nav>
  </header>

  <main>
    <article>
      <h2>ブログ記事タイトル</h2>
      <p>本文テキスト...</p>
    </article>

    <section id="news">
      <h2>お知らせ</h2>
      <ul>
        <li>更新情報1</li>
        <li>更新情報2</li>
      </ul>
    </section>
  </main>

  <aside>
    <p>サイドバーの内容</p>
  </aside>

  <footer>
    <p>© 2025 Example</p>
  </footer>
</body>

よくある間違い

  • divやspanを多用して構造タグを使わない → SEOやアクセシビリティに不利
  • idを複数箇所で使ってしまう → JavaScriptで誤動作
  • mainを複数設置 → ページ構造が崩れる

まとめ

  • idは一意な識別子、classは再利用・デザイン用
  • 主要なセクションにはid、繰り返しのデザイン要素にはclass
  • 構造タグを使うことでSEOやアクセシビリティが向上

迷ったら「意味を持たせたいなら構造タグ」「スタイルはclass」「唯一の要素ならid」と覚えておくと便利です。