すぐ分かる！HTMLで定義リスト（dlタグ）を使う方法【初心者向け】
HTML初心者向けに、定義リスト【dlタグ】の使い方について解説した記事です。dlタグは、何か(dt)に対してその内容(dd)がセットになっているリスト を意味します。サンプルコードを見ながらdlタグの使い方を覚えましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。
今回は、HTMLで定義リストを使う方法について解説します。
そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。
なお、今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
HTMLで定義リスト（dlタグ）を使う方法について詳しく説明していくね！
お願いします！
HTMLで定義リストを使う方法
定義リストの<dl>タグは 何か<dt>に対してその内容<dd>がセットになっているリスト を意味します。セットで使うタグなので、セットで覚えてしまいましょう。
・情報がセットになったリスト description list <dl>〜</dl>
<dt>タグと<dd>タグをセットにまとめて一つのリストをつくります。
なお、dlタグは以前はdefinition list（定義リスト）として扱われていましたが、最新バージョンのHTML5ではdescription list（記述する・描写するリスト）というより汎用性をもった意味に変わりました。
・項目名 description term <dt>〜<dt>
<dd>タグで説明される用語や文章を意味します。
・内容や説明文 description,definition <dd>〜</dd>
<dt>タグを説明する言葉や文章が入ります。
1つずつ例をみてみましょう。
定義リスト？他にもリストタグがあったような気がするんですが・・・。
細かいんだけど、ulは順不同リストタグ、olは順序リストタグ、dlは定義リストタグ(記述リストタグ)なんだよ。
わかりづらいです。ulはメニューバーに使うのは何となく覚えているんですけど。
とりあえずdlタグの例を実際に見てみよう！
<dl>タグの使い方
<dl>タグを使ってQ&Aページをつくってみましょう。
<dl>
<dt>質問1</dt>
<dd>答え1</dd>
<dt>質問2</dt>
<dd>答え2</dd>
<dt>質問3</dt>
<dd>答え3</dd>
</dl>
<dd>タグでかこまれた答えの部分がインデント（字下げ）され、質問に対する答えのリストができました。
他に、<dl>タグを使って用語集をつくることもできます。
例えばこのように書きます。
<dl>
<dt>HTML</dt>
<dd>Webブラウザに文字を表示させるための言語</dd>
<dd>文書の構造を示すために書かれる</dd>
<dt>CSS</dt>
<dd>文書の見た目を決めるために書かれるもの</dd>
<dd>デザインを決める役割をもつ</dd>
</dl>
すると、<dd>タグで囲まれた部分がインデント（字下げ）されました。
ブラウザ上の見た目は「項目名に、字下げされた内容が表示されたもの」ですが、コンピューター上では<dl>タグでかこまれた部分がまとまりを持った一つのコンテンツとして意味を持つものになります。
見た目が変わらないからといって<p>タグや<br>タグを使ってリストをつくるよりも、タグを正しく使い分けたほうが、ページがすっきりして管理がしやすくなる上に、Web上でもきちんと整理された質の高いページだと認識されます。
項目(dt)と内容(dd)がセットになっているリスト(dl)として覚えておきましょう。
今回はHTMLで定義リストを使う方法についてご紹介しました。
さらにHTMLの基礎を学びたい場合は、HTMLでリストを使う方法も合わせてご覧ください。
dlタグはQ&Aや用語集に使うんですか？
そうだよ。語句や項目(dtタグ)と文章(ddタグ)の組み合わせなんだよ。
何となくイメージ出来ました！他に使われている箇所ってないんですか？
お問い合わせフォームなんかもdlタグが使われているケースが多いね。
TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
