すぐ分かる!HTMLで定義リスト(dlタグ)を使う方法【初心者向け】

HTML初心者向けに、定義リスト【dlタグ】の使い方について解説した記事です。dlタグは、何か

に対してその内容
がセットになっているリスト を意味します。サンプルコードを見ながら
タグの使い方を覚えましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

HTMLについて今さら聞けない!という初心者のために、HTMLの基礎を紹介する記事です。

今回は、HTMLで定義リストを使う方法について解説します。

そもそも、HTMLの記述方法がわからない場合は、先に HTMLの書き方 の記事をご覧ください。

また、他のリストの使い方も合わせてご覧ください。

 

本記事は、TechAcademyのWebデザインオンラインブートキャンプのHTMLのカリキュラムをもとに執筆しています。

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

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>

dl_tag2
<dd>タグでかこまれた答えの部分がインデント(字下げ)され、質問に対する答えのリストができました。

 

他に、<dl>タグを使って用語集をつくることもできます。

例えばこのように書きます。

<dl>
<dt>HTML</dt>
<dd>Webブラウザに文字を表示させるための言語</dd>
<dd>文書の構造を示すために書かれる</dd>
<dt>CSS</dt>
<dd>文書の見た目を決めるために書かれるもの</dd>
<dd>デザインを決める役割をもつ</dd>
</dl>

dl_tag

すると、<dd>タグで囲まれた部分がインデント(字下げ)されました。

 

ブラウザ上の見た目は「項目名に、字下げされた内容が表示されたもの」ですが、コンピューター上では<dl>タグでかこまれた部分がまとまりを持った一つのコンテンツとして意味を持つものになります。

見た目が変わらないからといって<p>タグや<br>タグを使ってリストをつくるよりも、タグを正しく使い分けたほうが、ページがすっきりして管理がしやすくなる上に、Web上でもきちんと整理された質の高いページだと認識されます。

項目(dt)と内容(dd)がセットになっているリスト(dl)として覚えておきましょう。

 

今回はHTMLで定義リストを使う方法についてご紹介しました。

さらにHTMLの基礎を学びたい場合は、HTMLでリストを使う方法も合わせてご覧ください。

 

大石ゆかり

dlタグはQ&Aや用語集に使うんですか?

田島悠介

そうだよ。語句や項目(dtタグ)と文章(ddタグ)の組み合わせなんだよ。

大石ゆかり

何となくイメージ出来ました!他に使われている箇所ってないんですか?

田島悠介

お問い合わせフォームなんかもdlタグが使われているケースが多いね。

また、現役エンジニアから学べる無料のプログラミング体験会もオンラインで実施しているので、ぜひ参加してみてください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。HTMLの基礎から学ぶことができます。