【実務・中級編】リスト構造のセマンティックな使い分け – HTML実践ガイド

なぜ今さら「リストタグ」の話をするのか？――Webの骨格を正すセマンティクスの本質

現場でコードレビューをしていると、未だに「とりあえず`div`と`span`で組んで、CSSで整える」という実装に出くわすことがあります。一見、見た目さえ合っていれば問題ないように思えるかもしれません。しかし、それは「中身のないハリボテの家」を建てているのと同じです。

HTMLタグは、単なるデザインの箱ではありません。ブラウザや支援技術（スクリーンリーダーなど）に対する「この情報の性質」を伝えるための強力なメッセージです。今回は、リスト周りのタグをどう使い分けるべきか、実務で直面する「迷いどころ」を解剖していきましょう。

—

1. `ul`, `ol`, `dl` を選ぶための「たった一つの判断基準」

リストの使い分けで悩んだら、こう自問してみてください。「そのリストの項目間に、序列や関連性のルールはあるか？」

` ` (Unordered List)：順序に意味がない情報の羅列

メニュー項目や、ニュースの一覧など、順番が入れ替わっても文脈が崩れないものに使います。

判断基準: 1番目と2番目を入れ替えても、情報としての価値が損なわれないか？

` ` (Ordered List)：順序そのものに意味がある情報

手順やランキングなど、「1から順に追うこと」に価値がある場合です。

判断基準: 順番が入れ替わると、手順やランキングとしての意味が崩壊するか？

` ` (Description List)：用語と解説のペア

これは少し特殊です。「用語と説明」「質問と回答」のように、ペア関係（Key-Value）が明確な場合に使います。

—

2. なぜ `div` でのマークアップが「悪」とされるのか

「見た目が同じなら良いのでは？」という問いに対し、スペシャリストとして断言します。「アクセシビリティの欠如は、ユーザーの門戸を閉ざす行為」です。

スクリーンリーダーは、`ul`や`li`を読み込む際、「リスト項目です。全5件中1件目」といったコンテキストをユーザーに伝えます。`div`で組まれたものは、ただの「連続するテキスト」として読み上げられ、視覚障害を持つユーザーは「今、自分はどの程度の分量の情報を見ているのか」という全体像を把握できなくなります。

`div`でリストを模倣するのは、階段の代わりに梯子を置いて「これで登れるでしょ？」と強要するようなものです。技術の力でバリアを作る必要はありません。

—

3. 実務で使える「一歩先行く」マークアップ例

現場でよくある「FAQ」を例に、`dl`を使った正しい構造を見てみましょう。

サイトの表示速度を改善するには？: まずは画像のリサイズと、レンダリングブロックを避けるスクリプトの配置を見直しましょう。
SEOに強いマークアップとは？: 意味のあるタグを使い、構造を明確にすること。それが検索エンジンへの一番の近道です。

> Tips: 上記のように `dt` と `dd` を `div` でラップするのは、CSSでのレイアウト制御を容易にするための現場の知恵です。HTML5以降、`dl` の直下に `div` を置くことは正式に許可されているので、安心して構造化に役立ててください。

—

4. ブラウザが裏側でやっていること

ブラウザのレンダリングエンジンは、HTMLタグを見て「Accessibility Tree（アクセシビリティツリー）」という別の木構造を裏で構築しています。

`ul`や`li`が使われていると、ブラウザは「これはリストである」というセマンティックな情報をツリーに追加します。これにより、OSの支援技術や検索エンジンのクローラーが「このコンテンツは情報の塊である」と正確に認識し、スニペットの生成や読み上げ精度を向上させるのです。

あなたの書いたコードが「機械にとっての正解」であればあるほど、結果的に「ユーザーにとって使いやすいWebサイト」として評価されます。

—

最後に：コードの美学

フロントエンド開発において、「動くこと」は最低条件です。その先にある「誰に対しても正しく、メンテナンスしやすく、意味のあるコードを書くこと」こそが、私たちエンジニアの矜持ではないでしょうか。

「とりあえず`div`」という安直な道から脱却し、正しいタグを適材適所で使う。たったこれだけの積み重ねが、あなたのコードを「ただのプログラム」から「エンジニアの作品」へと引き上げます。

次回の実装では、ぜひ一度手を止めて、「このリストに最もふさわしい意味を持つタグはどれか？」と考えてみてください。その小さな思考の積み重ねが、最高峰のフロントエンドへの入り口です。