定義・説明リストを作ることが出来るのがdl,dt,ddタグですが、この入れ子構造を作る時にどの順序であればよかったか本当にすぐに忘れてしまいます。
aタグでtarget=”_blank”を指定するか迷ったら自サイトの主要ユーザー層を考える
ですが、これは各タグが英語の短縮語から作られていることを覚えれば一発であるということに、最近やっと気付きました。
そもそも、プログラムとは英語のようなもので、言語なのです。
TechAcademyを受講して改めて分かったプログラミングを上達するための３つのコツ
目次
定義 = definition、説明 = descriptionであることを知っていれば、dl,dt,ddタグの入れ子の使い方はすぐ分かる
元々HTML4.01までのdl,dt,ddタグは「定義リスト(definition list)」と呼ばれており、その際はdtタグは「定義される単語(definition term)」、ddタグは「定義の説明(definition description)」でした。
それが、HTML5に移行する際にdefinition ⇒ descriptionへと少し意味合いが変わりました。
HTML5で廃止されたブロックレベル要素とインライン要素の違いとCSSのdisplayプロパティーについて
実際の使い方ではあまり意識する必要は無いですが、以下のようになります。
<dl>
<dt>最近心を打った映画</dt>
<dd>「君の名は。」は新海誠が送る傑作だった</dd>
<dt>普通だった映画</dt>
<dd>「シンゴジラ」は思ったほど響かなかった</dd>
</dl>
言葉の定義であることをブラウザに知らせたい場合は「dfnタグ」を使う
上記の例のように、言葉の説明のリストを記述する例がほとんどなため、言葉の定義であることを示すにはdfn要素(定義を表す英語のdefinitionの省略であることは言わずもがな)を使う必要があることも、合わせて覚えておくといいでしょう。
