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

HTMLで定義リストを作成する方法｜dl・dt・ddタグの使い方を解説

定義リストとは

HTMLでは、<dl>タグを使用することで定義リスト（記述リスト）を作成できます。定義リストは通常の箇条書きリストと似ていますが、最大の特徴は各項目が「用語」と「その説明」の2つの要素で構成されるという点です。

例えば、用語集やFAQ、製品の仕様一覧など、「言葉とその意味」をセットで表示したい場合に非常に便利なリスト形式です。

<dl>タグの基本構造

定義リストは、以下の3つのタグを組み合わせて構成します。

  • <dl>：定義リスト全体を囲むコンテナ要素
  • <dt>：定義する用語（term）を記述する
  • <dd>：用語に対する説明や定義内容（description）を記述する

つまり、<dl>タグの中に<dt>タグと<dd>タグをペアで配置するのが基本的な使い方です。

定義リストのサンプルコード

以下のコードを実行すると、HTML5で定義リストを定義する方法を実際に確認できます。

<!DOCTYPE html>
<html>
    <head>
        <title>HTML dl Tag</title>
    </head>
    <body>
        <dl>
            <dt>Definition List</dt>
            <dd>A list of terms and their definitions/descriptions.</dd>
            <dt>Android</dt>
            <dd>Android tutorial.</dd>
            <dt>Ruby</dt>
            <dd>Ruby tutorial.</dd>
        </dl>
    </body>
</html>

ポイントまとめ

  • 定義リストには<dl>タグを使用する
  • 用語は<dt>タグ、説明は<dd>タグで記述する
  • 1つの<dt>に対して複数の<dd>を設定することも可能
  • 用語集・FAQ・仕様書など、語句と説明を対にしたい場面で活用できる
  1. HTMLのlist属性とは？datalist要素で入力候補を表示する方法を解説

    HTMLのlist属性とはHTMLでは、<datalist>要素を使用して、あらかじめ定義された選択肢のリストを作成できます。このリストは<input>要素（入力欄）に対して適用され、ユーザーが文字を入力すると、定義済みの選択肢が候補として自動的に表示されます。<input>要素のlist属性は、対応する<datalist>要素のidを参照することで、入力欄と選択肢リストを関連付けます。このlist属性は、HTML5で新たに導入された機能です。list属性の基本的な使い方list属性を使うには、以下の2つのステップを行います。<datali

  2. HTMLリストの基本を徹底解説！ul・ol・dlタグの使い分けと書き方

    HTMLリストとは？ HTML文書では、情報を見やすく整理するために「リスト」を使用します。HTMLのリストには主に以下の3種類があります。 順序なしリスト（番号なしリスト） 順序ありリスト（番号付きリスト） 記述リスト（定義リスト） それぞれの特徴と書き方を詳しく見ていきましょう。 1. 順序なしリスト（<ul>タグ） 順序なしリストは、<ul>タグで定義します。各リスト項目は<li>タグで囲みます。ブラウザ上では箇条書きとして表示され、項目の先頭に黒丸（ビュレット）が自動的に付きます。順番に意味がない項目を並べる際に最適です。 構文 基本的な構文