<dl>

HTML <dl> 요소는 설명 목록을 나타냅니다. <dl><dt>로 표기한 용어와 <dd> 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성합니다. 주로 용어사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용합니다.

콘텐츠 카테고리 플로우 콘텐츠. <dl>의 자식 중 이름-값 그룹이 있으면 뚜렷한 콘텐츠.
가능한 콘텐츠

하나 이상의 <dt> 요소와 하나 이상의 <dd> 요소로 구성한 그룹 0개 이상. 선택적으로 <script><template>을 혼합 가능.
또는, 하나 이상의 <div>. 선택적으로 <script>, <template> 혼합 가능.

태그 생략 None, both the starting and ending tag are mandatory.
가능한 부모 요소 플로우 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할 group, presentation
DOM 인터페이스 HTMLDListElement

특성

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

예제

하나의 용어와 하나의 정의

<dl>
  <dt>Firefox</dt>
  <dd>
    Mozilla 재단과 수 백명의
    자원봉사자가 개발한 무료
    오픈소스 크로스 플랫폼
    그래픽 웹 브라우저.
  </dd>

  <!-- 다른 용어 및 정의 -->
</dl>

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

<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>
    Mozilla 재단과 수 백명의
    자원봉사자가 개발한 무료
    오픈소스 크로스 플랫폼
    그래픽 웹 브라우저.
  </dd>

  <!-- 다른 용어 및 정의 -->
</dl>

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

<dl>
  <dt>Firefox</dt>
  <dd>
    Mozilla 재단과 수 백명의
    자원봉사자가 개발한 무료
    오픈소스 크로스 플랫폼
    그래픽 웹 브라우저.
  </dd>
  <dd>
    붉은 판다, 레서 판다, 랫서 판다,
    혹은 "Firefox"는 초식성 포유류이다.
    몸 길이는 애완용 고양이보다 약간
    큰 정도인 60cm다.
  </dd>

  <!-- 다른 용어 및 정의 -->
</dl>

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

위의 예제를 결합하여 여러 용어를 여러 정의와 연결하는 것도 가능합니다.

메타데이터

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

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

dt:after {
  content: ": ";
}

이름-값 그룹을 <div>로 감싸기

WHATWG HTML에서는 <dl> 안 각각의 이름-값 그룹을 <div>로 감쌀 수 있습니다. 마이크로데이터를 사용할 때, 그룹에 전역 특성을 적용할 때, 아니면 스타일을 적용할 때 유용할 수 있습니다.

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

참고

페이지에서 들여쓰기를 하기 위한 목적으로 <dl> (또는 <ul>) 요소를 사용하지 마세요. 작동할 수는 있으나 좋지 않은 방법이고, 설명 목록의 원래 목적을 흐립니다.

용어의 들여쓰기를 수정하려면 CSS margin 속성을 사용하세요.

접근성 고려사항

각각의 스크린 리더는 <dl>을 다르게 표현합니다. iOS의 VoiceOver 등 일부 스크린 리더는 <dl>의 콘텐츠를 리스트로 표현하지 않습니다. 따라서, 각 아이템의 콘텐츠는 리스트 그룹 내 다른 항목과의 관계를 표현할 수 있는 방식으로 작성해야 합니다.

명세

명세 상태 주석
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 Initial definition

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
dlChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

같이 보기