【実務・中級編】dl要素とtable要素の使い分け – HTML実践ガイド

なぜ「dl」と「table」で迷うのか？セマンティクスで紐解くデータ構造の正解

現場でコードレビューをしていると、未だに「とりあえず見た目が整列しているから」という理由で、あらゆる情報を `

` で囲ってしまうケースに遭遇します。あるいは、逆に「テーブルっぽく見えるデータ」を無理やり `

フロントエンド開発において、HTMLは単なる「見た目の指示書」ではなく「データの意味の定義書」です。今回は、中級エンジニアなら避けて通れない「`dl` と `table` の境界線」について、ブラウザの解釈と現場の実戦的な判断基準を深掘りしていきましょう。

—

1. そもそも「dl」と「table」は何を表現するものか

結論から言えば、判断基準は「データに軸が複数あるか、それとも1つか」です。

dl (Description List)

`dl` は「用語と説明」のペアを作るための要素です。これは1対1、あるいは1対多の関係性を持つ「単一のエンティティ（実体）」の属性情報を記述するのに適しています。

イメージ: プロフィールの詳細、製品の仕様書、辞書の定義。
データ構造: 「名前（dt）」と「値（dd）」の垂直的な繋がり。

table

`table` は「2次元のデータグリッド」です。行と列という2つの軸を持ち、特定の列がすべての行で共通の属性（見出し）を持つ場合にのみ使います。

イメージ: 請求書の内訳、統計データ、検索結果一覧。
データ構造: 行（tr）の中にセル（th/td）が並ぶ、クロスリファレンス的な関係性。

—

2. ブラウザは裏側でどう解釈しているのか

アクセシビリティ・ツリーを意識したことはありますか？

ブラウザのレンダリングエンジンは、`

` に遭遇すると、その構造を「グリッド（Grid）」として認識し、スクリーンリーダーに対して「このデータは行列で構成されており、セル単位でナビゲーションが可能である」という情報を伝えます。

一方で `dl` は、「リスト」の一種として認識されます。しかし、現代のブラウザでは `dl` 内の `dt` と `dd` は特定の意味を持つ「ペア」としてグループ化されます。もし、単なる属性の羅列に `table` を使ってしまうと、スクリーンリーダー利用者は「行列のナビゲーション」を強要され、本来不要な操作コストが発生してしまうのです。

—

3. 実践：現場で迷わないための判断フロー

迷ったときは、以下の問いを自分に投げかけてみてください。

1. 「そのデータは、行列（行と列）で表現しなければ読み解けないか？」

YES → `table`
NO → `dl`

2. 「すべての行に同じ見出し（th）を適用できるか？」

YES → `table`
NO → `dl`

—

4. コピペで使える！モダンな実装例

ケース1：ユーザープロフィール（`dl` が最適な例）

「名前」「メールアドレス」「所属」といった属性は、1つの対象物に対する詳細情報です。

名前: 山田太郎
メールアドレス: taro.yamada@example.com
所属: フロントエンド開発部

ケース2：料金プラン比較（`table` が最適な例）

「プランA」「プランB」に対して「価格」「機能」「サポート」といった共通の軸がある場合は、迷わず `table` です。

プラン	価格	サポート
ベーシック	無料	メールのみ
プロ	1,000円	チャット優先

—

最後に：セマンティクスは「未来の自分」への手紙

「動けばいい」というコードは、数ヶ月後の自分やチームメンバーを苦しめます。特にスクリーンリーダーや検索エンジンにとって、意味不明なマークアップは「ノイズ」でしかありません。

`dl` や `table` を正しく使い分けることは、単なるルールの遵守ではなく、「このデータはどういう意味を持っているのか？」をコードを通じて宣言するという、エンジニアとしての矜持です。

皆さんも明日からのコーディングで、`table` タグを使おうとした瞬間に「これ、本当にグリッド構造が必要なデータだっけ？」と、一度立ち止まって考えてみてください。その一瞬の迷いが、間違いなくあなたのコードの質を一段上のレベルへ引き上げてくれるはずです。