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

「ただの並び」じゃない！HTMLリストタグを正しく使いこなして、Webに「意味」を吹き込もう

Web制作を始めたばかりの頃、こんなふうに思ったことはありませんか？
「見た目は全部同じように並んでいるのに、なんでわざわざ `ul` とか `ol` とか、いろんなタグがあるんだろう？全部 `div` で囲っちゃえば楽なのに！」

実は、これこそがWebの世界の「入り口」であり、一番大切なポイントなんです。今日は、なぜ私たちがわざわざリストタグを使い分けるのか、その「隠された理由」を紐解いていきましょう。

Webブラウザは、私たちが思っている以上に「賢いけれど、想像力がない」存在です。
あなたが「ここをリストっぽく見せたいな」と思って `div` を並べても、ブラウザから見ればそれはただの「四角い箱の集まり」に過ぎません。

でも、`ul` や `ol` を使うと、ブラウザはこう理解してくれます。
「ああ、これは関連する項目の集まりなんだな！」と。

この「情報の意味を正しく伝えること」をセマンティックなマークアップと呼びます。これをするかしないかで、検索エンジン（Googleなど）の評価や、目の不自由な方が使う「スクリーンリーダー（画面読み上げソフト）」の使い勝手が劇的に変わるんです。

—

身近な例えで考えてみましょう。

「お買い物の材料リスト」をイメージしてください。
キャベツ、豚肉、玉ねぎ。これらは順番が入れ替わっても、お買い物の内容自体は変わりませんよね？
このように、「順序にこだわらない項目の集まり」には `ul` を使います。

「カップラーメンの作り方」はどうでしょう。
1. お湯を沸かす
2. フタを開けてかやくを入れる
3. お湯を注ぐ
4. 3分待つ
順番を間違えたら、大変なことになりますよね！このように、「1, 2, 3…」とステップが重要なものは `ol` の出番です。

これはちょっと特殊な「辞書」スタイルです。
「用語（dt）」と「その解説（dd）」がセットになっているとき、`dl` が輝きます。お買い物のレシートを想像してください。
「商品名：りんご」「価格：100円」。このペアの関係性を表現するのにぴったりなんです。

—

「`div` を使っても見た目は変えられるし、CSSでなんとかなるよね？」
そう思う気持ち、すごくよくわかります。でも、ここには「アクセシビリティ」という大きな壁があるんです。

例えば、目の不自由な方がスクリーンリーダーを使っているとき、`ul` で書かれたリストに出会うと、機械は「3項目のリストです」と教えてくれます。
でも、`div` で適当に並べただけだと、機械は「ただの文字列の羅列」としか判断できず、ユーザーはそれがリストなのか、ただの文章なのかを区別できません。

「誰にとっても使いやすいWebサイト」を作ることは、単なるマナーではなく、Webの作り手としての「優しさ」なんです。

—

ここまで読んで「うわ、ちゃんと使い分けなきゃ…！」とプレッシャーに感じてしまったらごめんなさい。でも、安心してください。最初から全てを完璧にできる人なんていません。

まずは、「あ、これは順番が大事なリストだから `ol` にしてみようかな？」と、ふと思い出すだけで十分な進歩です。

HTMLを書くことは、ブラウザという「相棒」に、あなたの伝えたい情報を正しく教えるお手紙を書くようなもの。少しずつ、そのお手紙を丁寧に書けるようになっていきましょうね。

もし迷ったら、いつでもこのページに戻ってきてください。あなたのWeb制作ライフを、これからも応援しています！