dl,dt,ddタグで定義・説明リストを作る時の入れ子の覚え方は、英語の短縮語から考える

2018年9月21日HTMLdd,dl,dt,タグ,リスト,入れ子,定義,説明

定義・説明リストを作ることが出来るのがdl,dt,ddタグですが、この入れ子構造を作る時にどの順序であればよかったか本当にすぐに忘れてしまいます。

ですが、これは各タグが英語の短縮語から作られていることを覚えれば一発であるということに、最近やっと気付きました。

そもそも、プログラムとは英語のようなもので、言語なのです。

定義 = definition、説明 = descriptionであることを知っていれば、dl,dt,ddタグの入れ子の使い方はすぐ分かる

元々HTML4.01までのdl,dt,ddタグは「定義リスト(definition list)」と呼ばれており、その際はdtタグは「定義される単語(definition term)」、ddタグは「定義の説明(definition description)」でした。

それが、HTML5に移行する際にdefinition ⇒ descriptionへと少し意味合いが変わりました。

実際の使い方ではあまり意識する必要は無いですが、以下のようになります。

<dl>
    <dt>最近心を打った映画</dt>
        <dd>「君の名は。」は新海誠が送る傑作だった</dd>
    <dt>普通だった映画</dt>
        <dd>「シンゴジラ」は思ったほど響かなかった</dd>
</dl>

言葉の定義であることをブラウザに知らせたい場合は「dfnタグ」を使う

上記の例のように、言葉の説明のリストを記述する例がほとんどなため、言葉の定義であることを示すにはdfn要素(定義を表す英語のdefinitionの省略であることは言わずもがな)を使う必要があることも、合わせて覚えておくといいでしょう。

2018年9月21日HTMLdd,dl,dt,タグ,リスト,入れ子,定義,説明