HTML <dl>
요소는 설명 목록을 나타냅니다. <dl>
은 <dt>
로 표기한 용어와 <dd>
요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성합니다. 주로 용어사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용합니다.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
콘텐츠 카테고리 | 플로우 콘텐츠. <dl> 의 자식 중 이름-값 그룹이 있으면 뚜렷한 콘텐츠. |
---|---|
가능한 콘텐츠 |
하나 이상의 |
태그 생략 | 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>
) 요소를 사용하지 마세요. 작동할 수는 있으나 좋지 않은 방법이고, 설명 목록의 원래 목적을 흐립니다.
접근성 고려사항
각각의 스크린 리더는 <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 |
브라우저 호환성
BCD tables only load in the browser