【HTML】dl要素、dt要素、dd要素の使い方【用語の定義や説明のリストを表示する】

Program

用語の定義や説明は、dl要素、dt要素、dd要素を使って表しましょう。

dl要素、dt要素、dd要素の使い方

以下のプログラムと、ブラウザでの表示結果を見てください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dl要素、dt要素、dd要素</title>
</head>
<body>
    <dl>
        <dt>チャットボット</dt>
        <dd>「チャットボット(chatbot)」とは、「チャット」と「ボット」を組み合わせた言葉で、人工知能を活用した「自動会話プログラム」のこと。</dd>
    </dl>
    <dl>
        <dt>ブラウザ</dt>
        <dd>Internet Explorer</dd>
        <dd>Microsoft Edge</dd>
        <dd>Google Chrome</dd>
        <dd>Mozilla Firefox</dd>
        <dd>Safari</dd>
        <dd>Opera</dd>
    </dl>
</body>
</html>

body要素の中に、用語の定義を表すdl要素が2ブロックあります。

1つ目のdl要素では、定義する用語として、「チャットボット」がdt要素でマークアップされています。

そして、定義した用語の説明として、『「チャットボット(chatbot)」とは・・・』との文章が、dd要素でマークアップされています。

このため、ブラウザの表示結果の通り、dt要素でマークアップされた「チャットボット」に対して、インデントが施された位置に、dd要素でマークアップされた『「チャットボット(chatbot)」とは・・・』との説明が表示されます。

また、2つ目のdl要素では、定義する用語として、「ブラウザ」がdt要素でマークアップされています。

そして、定義した用語の説明のリストとして、「Internet Explorer」、「Microsoft Edge」などのリストが、dd要素でマークアップされています。

このため、ブラウザの表示結果の通り、dt要素でマークアップされた「ブラウザ」に対して、インデントが施された位置に、dd要素でマークアップされた「Internet Explorer」などの説明のリストが表示されます。

つまり、「定義する用語(dt要素でマークアップされた用語)」に対して、「説明やリスト(dd要素でマークアップされた文章やリスト)」がインデントされた状態で、表示されることになります。

各種ブラウザでの表示結果

dl要素、dt要素、dd要素の各種ブラウザにおける最新のサポート状況は、以下のようになってます。

【HTML】Internet ExplorerGoogle ChromeMicrosoft EdgeSafariFirefoxOpera
dl要素
dt要素
dd要素
〇:サポートあり、△:制限あり、×:サポートなし。?:不明

以上、dl要素、dt要素、dd要素の使い方について、ご参考になさってください。

タイトルとURLをコピーしました