HTML
slim

「dl,dt,ddタグ」の使い方とhtml5,slimでの記述方法

More than 3 years have passed since last update.

dlタグ

  • ブロック要素
  • 入れ子にできるのはdtタグとddタグのみ
  • Description List(ディスクリプションリスト)の略
  • html4まではDefinition List(ディフィニションリスト)の略とされていた
  • 定義リストを表示させたい時に使う
  • リストの各項目はdtタグとddタグで記述する
<dl>
    <dt>マイクロブタ</dt>
    <dd>突然変異の超小ブタからできたブタで、体重20kg程度にしか成長しない。</dd>
</dl>
dl
    dt
        | マイクロブタ
    dd
        | 突然変異の超小ブタからできたブタで、体重20kg程度にしか成長しない。

dtタグ

  • ブロック要素
  • 入れ子にできるのはインライン要素のみ
  • Description Term(ディスクリプションターム)の略
  • html4まではDefinition Term(ディフィニションターム)の略とされていた
  • 定義する用語や専門的な用語をdtタグで記述する

ddタグ

  • ブロック要素
  • どんな要素も入れ子にできる
  • Description Description(ディスクリプションディスクリプション)の略???
  • html4まではDefinition Description(ディフィニションディスクリプト)の略とされていた
  • dtタグで記述された用語の説明をddタグで記述する

改行(brタグ)を含む定義リストの記述方法

<dl>
    <dt>ミニブタ</dt>
    <dd>通常のブタは大きいもので300kgを超えるが、ミニブタは体重40〜50kg程度にしか成長しない。
    <br>鳴き声が少なく、毛によってアレルギーを引き起こす心配が少ない。
    <br>きれい好きで、排泄場所をしつけることも可能。
    </dd>
</dl>
dl
    dt
        | ミニブタ
    dd
        | 通常のブタは大きいもので300kgを超えるが、ミニブタは体重40〜50kg程度にしか成長しない
        br
        | 鳴き声が少なく、毛によってアレルギーを引き起こす心配が少ない。
        br
        | きれい好きで、排泄場所をしつけることも可能。