HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのdlタグとは？記述リストの作成方法をサンプルコード付きで解説

HTMLのdlタグとは

HTMLの<dl>要素は、記述リスト（description list）を定義するために使用されるタグです。HTML5では<dl>は「記述リスト」を表しますが、HTML4では「定義リスト（definition list）」として扱われていました。この違いを理解しておくと、より適切なマークアップができるようになります。

記述リストは、用語とその説明をセットで表示したい場合に便利な要素で、用語集、FAQ、メタデータの表示など、さまざまな場面で活用できます。

dlタグの基本構造

<dl>タグは、以下の2つの要素と組み合わせて使用します。

  • <dt>要素：リスト内の用語（名前）を定義します。
  • <dd>要素：<dt>で定義した用語の説明（詳細）を記述します。

dlタグの使用例

それでは、実際に<dl>タグを使ったサンプルコードを見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h2>スポーツ</h2>
<dl>
    <dt>サッカー</dt>
        <dd>200以上の国と地域で、2億5000万人以上のプレイヤーがプレイするスポーツです。</dd>
    <dt>クリケット</dt>
        <dd>11人ずつの2チームがフィールド上で行う、バットとボールを使った競技です。</dd>
    <dt>ホッケー</dt>
        <dd>バンディ、フィールドホッケー、アイスホッケーなど、さまざまな種類があります。</dd>
    <dt>ゴルフ</dt>
        <dd>さまざまなクラブを使って、コース上の一連のホールにできるだけ少ない打数でボールを入れるクラブアンドボール競技です。</dd>
</dl>
</body>
</html>

出力結果

ブラウザで表示すると、以下のように用語と説明がセットになった記述リストが表示されます。

HTMLのdlタグとは？記述リストの作成方法をサンプルコード付きで解説

コードの解説

上記の例では、記述リストを定義するために<dl>タグを使用しています。該当する部分は以下のとおりです。

<dl>
    <dt>サッカー</dt>
        <dd>200以上の国と地域で、2億5000万人以上のプレイヤーがプレイするスポーツです。</dd>
    <dt>クリケット</dt>
        <dd>11人ずつの2チームがフィールド上で行う、バットとボールを使った競技です。</dd>
    <dt>ホッケー</dt>
        <dd>バンディ、フィールドホッケー、アイスホッケーなど、さまざまな種類があります。</dd>
    <dt>ゴルフ</dt>
        <dd>さまざまなクラブを使って、コース上の一連のホールにできるだけ少ない打数でボールを入れるクラブアンドボール競技です。</dd>
</dl>

dt要素とdd要素の特徴

上記コード内の<dt>要素は、記述リスト内の用語を定義します。一方、<dd>要素も用語に関する内容を定義しますが、<dd>要素の中にはテキストだけでなく、リンク（<a>）、画像（<img>）、改行（<br>）などの要素を含めることができる点が特徴です。

この柔軟性により、<dl>タグは単純な用語集だけでなく、画像付きの説明リストやリンク付きのFAQなど、リッチなコンテンツのマークアップにも活用できます。

  1. HTMLのembedタグとは？使い方と主な属性をわかりやすく解説

    <embed>タグとは<embed>タグは、HTML文書の中に外部アプリケーションやプラグインコンテンツ（PDFファイル、動画、音声など）を埋め込むための要素です。開始タグのみで構成され、基本的に終了タグは不要です。<embed>タグで使用できる主な属性は以下の通りです。height：埋め込むコンテンツの高さをピクセル単位で指定します。src：埋め込む外部ファイルのアドレス（URL）を指定します。type：埋め込みコンテンツのメディアタイプ（MIMEタイプ）を指定します。例：「application/pdf」など。width：埋め込むコンテンツの幅をピクセル

  2. HTMLの<dfn>タグとは？定義用語のマークアップ方法を実例付きで解説

    HTMLの<dfn>タグは、専門用語や略語など「定義の対象となる語」が文書内で最初に登場する箇所を示すための要素です。多くのブラウザでは、<dfn>タグで囲まれた部分は斜体（イタリック体）で表示されます。 それでは、<dfn>タグの具体的な実装例を見ていきましょう。 コード例 <!DOCTYPE html> <html> <body> <h2>MCAの科目一覧</h2> <p><dfn title="Master of Computer Applications"