<dl> 설명 목록 요소

Baseline

Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.

See full compatibility
Learn more

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

시도해 보기

<p>Cryptids of Cornwall:</p>

<dl>
  <dt>Beast of Bodmin</dt>
  <dd>A large feline inhabiting Bodmin Moor.</dd>

  <dt>Morgawr</dt>
  <dd>A sea serpent.</dd>

  <dt>Owlman</dt>
  <dd>A giant owl-like creature.</dd>
</dl>

p,
dt {
  font-weight: bold;
}

dl,
dd {
  font-size: 0.9rem;
}

dd {
  margin-bottom: 1em;
}

각각의 스크린 리더는 <dl>를 다르게 표현합니다. 즉, 총 아이템의 개수, 용어/정의 컨텍스트 및 탐색 방법등을 다르게 노출합니다. 이러한 차이가 반드시 버그는 아닙니다. iOS 14부터의 VoiceOver는 전체 읽기 멍령이 아닌 가상 커서 탐색 시, <dl> 콘텐츠가 목록임을 알립니다. VoiceOver는 <dl>를 이용한 목록 탐색을 지원하지 않습니다. ARIA 용어 및 정의 역할을 <dl> 구조에 적용하면 macOS 및 iOS에서 VoiceOver의 읽기 방식이 조정되므로 주의해야 합니다.

예제

단일 용어와 단일 정의

html

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

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

결과

복수 용어와 단일 정의

html

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

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

결과

단일 용어와 복수 정의

html

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

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

결과

복수 용어와 복수 정의

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

메타데이터

<dl>은 메타데이터를 키-값 쌍으로 표시할 때도 유용합니다.

html

<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로 지정하면 유용합니다.

<dl> 설명 목록 요소

시도해 보기

특성

접근성 고려사항

예제

단일 용어와 단일 정의

결과

복수 용어와 단일 정의

결과

단일 용어와 복수 정의

결과

복수 용어와 복수 정의

메타데이터

결과