LoginSignup
4

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-12-22

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
        | きれい好きで、排泄場所をしつけることも可能。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4