<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>

결과:

Image:HTML-dl1.png

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

<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>

결과:

Image:HTML-dl2.png

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

<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>

결과:

Image:HTML-dl3.png

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

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

메타데이터

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

<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 속성을 사용하십시오.

사양

사양 상태 주석
WHATWG HTML Living Standard
The definition of '<dl>' in that specification.
Living Standard  
HTML5
The definition of '<dl>' in that specification.
Recommendation  
HTML 4.01 Specification
The definition of '<dl>' in that specification.
Recommendation  

브라우저 호환성

기능 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 (Yes) (Yes) (Yes) (Yes)
기능 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)

같이 보기

문서 태그 및 공헌자

 이 페이지의 공헌자: leafriend, teoli, azunyan3
 최종 변경: leafriend,