HTML講座 / divとspanはいつ使うのか

divとspanは、それ自体では特別な意味を加えずに内容をまとめる汎用要素です。段落などを含むまとまりにはdiv、文章の一部分にはspanを使えます。適切な意味を持つ要素がある場合は、まずその要素を検討します。

divとspanの違い

divは段落、リスト、カード全体などのフローコンテンツをまとめられます。spanは文中のテキストや強調など、記述コンテンツをまとめるための要素です。初期状態では前者がブロック、後者がインラインとして表示されますが、CSSで表示方法は変えられます。

ただし「改行されるか」だけで選んではいけません。spanの中にpやdivを入れられるようになるわけではありません。ページ上の役割がある領域なら、セマンティック要素を先に検討します。

装飾が必要な範囲だけをまとめる

次のHTMLを文書のbodyへ、CSSをhead内のstyleまたはCSSファイルへ入れます。カード全体は枠で囲まれ、価格部分だけ色と太さが変わります。

<div class="product-card">
  <h2>Travel mug</h2>
  <p>Price: <span class="price">$15</span></p>
</div>

.product-card {
  padding: 16px;
  border: 1px solid #dadada;
}
.price {
  color: #075cb4;
  font-weight: 700;
}

CSSなしでも製品名は見出し、価格は段落として残ります。色が変わらない場合はclass="price"とCSSの.priceを比較してください。先頭の点はCSSのクラスセレクターを表すもので、HTMLのクラス名には含めません。

意味のある要素を優先する

主要な移動はnav、独立した記事はarticle、押して処理を実行する操作はbuttonなどを検討します。クリックできるようにしたspanが、自動的にボタンの意味やキーボード操作を持つわけではありません。ボタンの種類はbuttonとフォーム部品で扱います。

一方、この価格の装飾のように特別な意味を追加する必要がなければspanで十分です。CSSクラスを保ちながら、役割に合う別の要素に変えることもできます。

内容モデルとdisplayを混同しない

フローコンテンツ、記述コンテンツという分類は、HTMLでどの内容を入れられるかに関する規則です。CSSのdisplayは配置上の表示方法です。span { display: block; }としても、段落を中に入れることが適切になるわけではありません。

<!-- Nonconforming: a paragraph inside span -->
<span class="card"><p>Product description</p></span>
<!-- A wrapper that permits the paragraph -->
<div class="card"><p>Product description</p></div>

誤った断片と修正例は別々に比較します。見た目が整っただけで構造も直ったと判断せず、目的に合う包みへ変えます。spanとdivの定義で許可される内容を確認できます。

よくある使い過ぎを見直す

すべての領域をdivだけで作る必要も、装飾用の包みに意味の合わない要素を割り当てる必要もありません。見出しらしく装飾したspanは見出しではありません。まず内容と操作の役割を決め、必要な装飾のためだけに汎用の包みを追加すると、余分な入れ子を減らせます。