<dl>

개요

HTML <dl> 요소 (or HTML Description List Element) 는 여러 짝의 용어와 정의를 둘러쌉니다. 이 요소의 일반적인 용법은 어휘를 구현하거나 메타데이터(키-값 짝의 목록)을 표시하는 것입니다.

HTML5 이전까지 <dl>은 정의 목록(Definition List)으로 알려졌습니다.

• 컨텐츠 범주 플로우 컨텐츠, 그리고 <dl> 요소의 하위 요소가 이름-값 짝을 하나 가지고 있으면뚜렷한 콘텐츠.
• 허용된 컨텐츠 1개 이상의<dd> 요소가 뒤따르는 0개 이상의 <dt> 요소
• 태그 생략 None, both the starting and ending tag are mandatory.
• 허용된 부모 컨텐츠 플로우 컨텐츠를 허용하는 요소.
• DOM 인터페이스HTMLDListElement

속성

이 요소는 전역 속성을 포함합니다.

compact

설명이 용어와 같은 줄에 나타나도록 강제합니다. 이 속성은 현재 지원되지 않습니다.

예제

하나의 용어와 하나의 정의

<dl>
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.</dd>

  <!-- other terms and definitions -->
</dl>

결과:

여러 개의 용어와 하나의 정의

<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.</dd>

  <!-- other terms and definitions -->
</dl>

결과:

하나의 용어와 여러 개의 정의

<dl>
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.</dd>
  <dd>The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox,
      is a mostly herbivorous mammal, slightly larger than a domestic cat
      (60 cm long).</dd>

  <!-- other terms and definitions -->
</dl>

결과:

여러 개의 용어와 여러 개의 정의

위 예제를 결합하여 여러 개의 용어를 서로 대응하는 여러 개의 정의로 정의할 수 있습니다.

메타데이터

설명 목록은 메타데이터를 키-값 짝의 목록으로 표시할 때 유용합니다.

<dl>
    <dt>Name</dt>    
    <dd>Godzilla</dd>
    <dt>Born</dt>
    <dd>1952</dd>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
    <dt>Color</dt>
    <dd>Green</dd>
</dl>

팁: 키-값 구분자를 아래처럼 CSS3로 정의하면 편리합니다.

dt:after {
  content: ": ";
}

참고

페이지에서 그저 들여쓰기를 하기 위해 이 요소(또는 <ul> 요소)를 사용하지 마십시오. 이 방법은 통하긴 하지만, 이는 나쁜 습관이며 정의 목록의 뜻을 애매하게 합니다.

설명 용어의 들여쓰기를 바꾸려면 CSS margin 속성을 사용하십시오.

사양

브라우저 호환성

같이 보기

• <dt> 요소
• <dd> 요소