HTMLのdl・dt・ddとは？初心者でもわかる定義リストの基本と使い方
生徒
「HTMLでdlとかdt、ddっていうタグを見たんですけど、何に使うんですか？」
先生
「それは定義リストを作るためのタグですよ。言葉と説明をセットで表すときに使います。」
生徒
「箇条書きとは違うんですか？」
先生
「はい。意味の説明や用語集のような場面で使うのが特徴です。順番に見ていきましょう。」
1. HTMLの定義リストとは？
定義リストとは、ある言葉とその説明をセットで表示するためのHTMLの仕組みです。例えば、用語集やサービス内容の説明、質問と回答の一覧などに向いています。普通の箇条書きでは意味の関係が分かりにくい場合でも、定義リストを使うと情報のつながりがはっきりします。
2. dl・dt・ddそれぞれの役割
定義リストは三つのタグで構成されます。dlタグは全体を包む入れ物、dtタグは用語や項目の名前、ddタグはその説明文を表します。例えるなら、dtが質問、ddが答えのような関係です。この役割分担を理解することが、正しいHTMLを書く第一歩になります。
3. dl・dt・ddの基本構造
まずは、定義リストの一番シンプルな形を見てみましょう。一つの用語に対して、一つの説明を付ける構造です。
<dl>
<dt>HTML</dt>
<dd>Webページを作るための言語です。</dd>
</dl>
このように、dtとddをセットで書くことで、意味のある情報として表示されます。
4. 一つの用語に複数の説明を書く場合
一つの言葉に対して、説明が複数必要な場合もあります。そのときは、ddタグを続けて書きます。dlタグの中であれば、ddは何個書いても問題ありません。
<dl>
<dt>ブラウザ</dt>
<dd>インターネットを見るためのソフトです。</dd>
<dd>代表例としてChromeやSafariがあります。</dd>
</dl>
5. 定義リストが向いている具体的な場面
定義リストは、用語集、サービス一覧、料金説明、仕様の説明などでよく使われます。項目名と説明文がはっきり分かれている内容ほど、dl・dt・ddの構造が活きてきます。見た目だけでなく、情報の意味を正しく伝えられる点が大きな特徴です。
<dl>
<dt>送料</dt>
<dd>全国一律500円です。</dd>
<dt>支払い方法</dt>
<dd>クレジットカードが利用できます。</dd>
</dl>
6. dlタグの中で使える内容
ddタグの中には、文章だけでなく画像やリンクを入れることもできます。これにより、視覚的にも分かりやすい説明が可能になります。情報をただ並べるのではなく、相手に伝えることを意識するのが大切です。
<dl>
<dt>商品画像</dt>
<dd>
<img src="/img/sample150-100.png" alt="サンプル画像">
</dd>
</dl>
7. 箇条書きリストとの使い分け
ulやolは項目を並べるためのリストですが、定義リストは意味の関係を表すリストです。順番や単純な列挙なら箇条書き、説明が必要な場合は定義リスト、と覚えると分かりやすくなります。用途に合ったタグを使うことが、読みやすいHTMLにつながります。
8. 初心者が気をつけたいポイント
dtやddをdlの外に書いてしまうと、正しいHTMLになりません。また、見た目だけを理由に定義リストを使うのも避けましょう。HTMLは情報の意味を伝えるための言語です。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入門
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
