HTML dlの正しい書き方｜dtとddの対応関係を初心者向けに理解する
生徒
「HTMLのdlの中で、dtとddをどう並べればいいのか分からなくなります」
先生
「dlは並べ方がとても大切で、dtとddの対応関係を意識すると分かりやすくなります」
生徒
「順番を間違えると、見た目は同じでもダメなんですか？」
先生
「人にも検索エンジンにも意味が伝わりにくくなります。基本の形から確認しましょう」
1. dlタグとは何か
dlタグは、定義リストと呼ばれるHTMLの仕組みです。言葉とその説明をセットで表現するために使われます。辞書や用語集、サービス内容の説明など、項目と説明が対応している場面で活躍します。単なる見た目ではなく、意味のまとまりを表すことが目的です。
2. dtとddの役割の違い
dtは説明される項目の名前を表します。一方でddは、その項目についての説明文を書く場所です。dtが見出し、ddが本文のような関係になります。この役割を理解することが、dlを正しく書く第一歩です。
<dl>
<dt>送料</dt>
<dd>全国一律で500円です。</dd>
</dl>
3. dlの基本的な正しい構造
dlの中には、dtとddだけを書きます。必ずdtが先にあり、その直後に対応するddが続きます。この順番を守ることで、どの説明がどの項目に対応しているのかが明確になります。dlの外にdtやddを書いてはいけません。
<dl>
<dt>支払い方法</dt>
<dd>クレジットカードと銀行振込が利用できます。</dd>
</dl>
4. 一つのdtに複数のddを対応させる
一つの項目に対して、説明が複数ある場合もあります。その場合は、dtのあとにddを続けて書きます。すべてのddは、直前のdtに対応します。箇条書きの代わりとしても使える便利な書き方です。
<dl>
<dt>スマートフォン</dt>
<dd>電話として使えます。</dd>
<dd>インターネットを利用できます。</dd>
</dl>
5. dtを連続して書く場合の考え方
dtを連続して書くと、それぞれが独立した項目として扱われます。その後に書かれるddは、直前のdtに対応します。対応関係を意識せずに書くと、説明がどの項目のものか分からなくなるため注意が必要です。
<dl>
<dt>電話番号</dt>
<dd>0120-000-000</dd>
<dt>受付時間</dt>
<dd>平日の午前9時から午後5時まで</dd>
</dl>
6. よくある間違った書き方
dlの中に文章を直接書いたり、dtとddの順番を入れ替えたりするのは誤りです。また、箇条書きの代わりとして何でもdlを使うのも適切ではありません。項目と説明が対応しているかどうかを判断基準にしましょう。
7. dlを使うときの身近な例え
dlは、学校のプリントでの用語と意味、商品名と説明文の関係に似ています。名前だけ、説明だけでは意味が伝わりません。セットで並べることで、初めて内容が理解できます。この感覚を持つと、dtとddの対応関係が自然に分かるようになります。
8. SEOとdlの関係
dlを正しく使うことで、検索エンジンがページ内容を理解しやすくなります。dtが重要なキーワード、ddがその説明として認識されやすくなるため、情報の整理されたページとして評価されやすくなります。見た目だけでなく意味を意識することが大切です。
「意味」がわかればWebは楽しい！現役エンジニアが教える、挫折しないためのHTML構造化入門
「Webの仕組み」を正しく操る。HTML5でプロフェッショナルな情報設計の第一歩を。
本講座では、単なるタグの暗記ではなく、「検索エンジンやAIに正しく伝わる情報の構造化」という本質的な技術を学びます。モダンWebの土台であるHTML5を通じて、将来的にWebデザイナーやフロントエンドエンジニアを目指すための「稼げる基礎力」を最短距離で身につけます。
具体的なワークショップ内容と環境
【つくるもの】
自己紹介やポートフォリオの土台となる「構造化されたWebページ」を作成します。見出し、段落、リスト、リンク、画像配置など、商用サイトでも必ず使われる「セマンティックなマークアップ」をゼロから体験してください。
【開発環境】
世界中のプロが愛用するVisual Studio Code (VS Code)を使用します。Emmet（高速入力機能）の設定から、HTMLの文法ミスを自動チェックする拡張機能まで、現場基準の効率的な環境を一緒に構築します。
この60分で得られる3つの武器
Googleから高く評価されるタグの選び方を理解し、検索上位を狙えるサイト構造の作り方を学びます。
プロが使うショートカットや自動補完機能を習得し、タイピングの手間を最小限にする技術を体得します。
画像への代替テキストや適切な階層構造など、誰にとっても使いやすい「優しいWeb」の作り方を伝授します。
※本講座は、将来的にWebデザイナー、コーダー、フロントエンドエンジニアを目指す未経験者のためのエントリー講座です。「モクモク」独自のマンツーマン形式により、コードを1行書くたびに生まれる疑問をその場で解決します。
現役エンジニアが教えるHTML入門
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
