こんにちは！フロントエンドの世界へようこそ。HTMLを書き始めたばかりの頃って、「このデータ、`
- `で囲むべき？ それとも`
- `
- `：名前（dt）と、その説明（dd）のセット
- `
`：見出し（th）と、そのデータ（td）のセット
見た目が同じならどっちでもいいのでは？ と思うかもしれませんが、ブラウザや検索エンジン（Googleなど）にとって、この2つは全く異なる「メッセージ」として伝わります。
ここを間違えないだけで、あなたの書くHTMLはグッとプロっぽくなりますよ！
—
2. 「dl要素」は、辞書やカタログのイメージ
`
- `（Description List）は、「用語とその解説」を並べるためのものです。
- 名前：りんご
- 説明：バラ科の果物。赤い色をしていることが多い。
- CPU
- パソコンの頭脳となるパーツです。
- メモリ
- 作業机の広さを決めるパーツです。
- 商品名、個数、価格（横の繋がり）
- Aさん、Bさん、Cさん（縦の繋がり）
- はい → `
`
2. 「項目がひとつ増えたとき、表全体が崩れるのではなく、ただ新しい項目が追加されるだけ？」
- はい → `
- `
例えば、「社員のプロフィール一覧」などは、ただの紹介であれば`
- `で十分ですが、「名前、部署、入社日」などが細かく分かれていて、Excelのように管理したいなら`
- `
- `：辞書のような「用語と解説」のセット。
- `
`：Excelのような「行列で比較する」データ。
- 迷ったら「並び替える必要はあるか？」を基準にしてみよう！
タイトルとURLをコピーしました
`が適しています。
—
最後に：完璧を目指さなくて大丈夫
ここまで解説してきましたが、最初は間違えても全く問題ありません！
HTMLを書くときに一番大切なのは、「これは何を表しているデータかな？」と一瞬立ち止まって考えることです。その優しさが、将来的に読みやすいコードを書く一番の近道になります。
「これ、どっちだろう？」と悩んだら、またいつでもここに戻ってきてくださいね。あなたのWeb制作ライフが、今日より少しだけ楽しくなりますように！
—
今回のまとめ - はい → `
身近な例でいうと、「広辞苑」や「製品のスペック表」です。
このように、「ある項目に対して、その説明が添えられている」という構造なら、迷わず`
- `を使いましょう。
—
3. 「table要素」は、Excelのシートのイメージ
一方で`
`は、「縦と横の交差点があるデータ」を扱うためのものです。
ポイントは、「同じ種類のデータが、縦にも横にも並んでいるか？」です。例えば、お買い物の明細や、クラスの出席簿ですね。
このように、行と列の両方に意味がある場合は、絶対に`
`です。
商品名 価格 りんご 100円 みかん 50円 —
4. 迷った時の「判断チャート」
もし迷ったら、以下の質問を自分に投げかけてみてください。
1. 「そのデータは、縦や横に並べ替えて比較する可能性がある？」
コメント