HTMLのdiv要素の使い方を徹底解説！正しい使用場面とセマンティックマークアップの重要性

この記事では、HTMLの<div>要素の基本的な使い方と、適切な使用場面について詳しく解説します。

<div>要素は、コンテンツを分割・グループ化・包み込むために使われる汎用コンテナ要素です。特定の意味を持たないため、文脈に応じて意味的な（セマンティックな）HTML要素がふさわしくない場合や、どの要素を使えばよいかわからない場合にのみ使用するのが基本です。

セマンティックマークアップとは？

セマンティックマークアップとは、中に含まれるコンテンツの意味や役割を表すHTML要素を使ってマークアップすることを指します。例えば、見出しには<h1>〜<h6>、段落には<p>を使うように、それぞれの要素が「何を表しているのか」が明確になります。

一方で、<div>要素は汎用的かつ非セマンティックな要素であり、それ自体には特別な意味がありません。あくまで「スタイリングやスクリプト操作のための器」として機能します。

div要素の具体的な使用例

例えば、サイト訪問者にニュースレターの購読を促すための、再利用可能なモーダルコンポーネントを作成するとしましょう。

こうしたコンポーネントを定義するための既存のセマンティックHTMLタグは存在しないため、汎用の<div>コンテナ要素を使うのが最適なケースといえます。

<div class="subscribe-modal">
  <form id="contact" method="post" action="">
    <fieldset>
      <h3>ニュースレターを購読する</h3>
      <input
        name="email"
        id="email"
        type="email"
        placeholder="メールアドレスを入力してください"
        required
      />
      <input type="submit" name="submit" class="submit" value="購読する" />
    </fieldset>
  </form>
</div>

このように、意味付けのできない独自のUIパーツをまとめる際に、<div>は活躍します。

div以外の主なコンテナ要素

<div>タグは数あるHTMLコンテナ要素の一つにすぎません。よく使われる主なコンテナ要素には以下のようなものがあります。

• <article>：独立して成立する記事コンテンツ
• <section>：テーマごとに区切られたセクション
• <main>：ページの主要コンテンツ領域
• <header>：ページやセクションのヘッダー部分
• <footer>：フッター部分
• <form>：入力フォーム全体

これらの要素のいずれかがコンテンツのコンテナとして自然に当てはまる場合は、汎用の<div>ではなくそちらを使用しましょう。

その理由は、上記の要素がすべてセマンティックな要素タグである一方、<div>は非セマンティックなタグであり、コンテンツに対して何の文脈情報も与えられないからです。

div要素を使う際に知っておきたいポイント

<div>要素の中には、あらゆる種類のコンテンツを配置できます。

セマンティックマークアップは一般的に推奨されていますが、ブラウザがページを理解してユーザーに表示するうえで必須というわけではありません。

ただし、HTMLにすでに適切なセマンティックタグが用意されている場面で、あえて汎用的・非セマンティックな要素を使うと、SEO（検索エンジン最適化）に悪影響を及ぼす可能性があります。検索エンジンのクローラーは、セマンティックな構造を手がかりにページの内容を理解するためです。

筆者の考えとしては、どのHTML要素を使えばよいかわからない場合には<div>を選ぶのが賢明です。誤った要素を使うよりも、汎用要素を使うほうが安全だからです。さらに言えば、技術的な観点では<div>要素を「間違って」使うことは実質的にありません。問題になるのは意味論的な観点だけです。