<dl>과 웹 접근성

의문이 들었음. 왜 ul, ol이 있는데 왜 굳이 dl이 있는 걸까?
dl의 필요성 =>
ul을 많이 쓰니까 당연히 ul을 쓴다? => no
물론 크게 상관없지만, 실제 프로젝트에서는 태그마다 존재하는 목적을 잘 파악해야한다. => 결국 웹 접근성에 대한 이야기
유의미한 순서가 있는 list형 구조에서는 ol 태그, 그렇지 않다면 ul 태그

dl 태그에 대한 탐구

정의

dl 태그는 Definition list의 약자.

dl : Definition-List
dt : Definition-Term
dd : Definition-Description

사용

그렇다면 dl 태그는 언제 쓰는가? => 결론부터 말하면 다음과 같이 두 가지 경우에 '가장' 적합
Name-Value 형태 (상위-하위 / 추상적-구체적)
(A) is (B) 형태

1. 대상을 정의(설명)할 때

  • Firefox : A web browser developed by the Mozilla Corporation and hundreds of volunteers.
  • 급훈 : 티어가 그마에 가까워질 수록 인생은 브론즈에 가까워진다.

2. 메타데이터를 표시할 때

  • Browser : Firefox
  • 게임 : 오버워치

(종합예시)

참고 : <dl> - HTML | MDN

주의사항

  • <dl>은 반드시 하나 이상의 <dt>-<dd> 짝을 담고 있어야 합니다.
  • <dt>,<dd><dl> 밖에서 독립적으로 사용할 수 없습니다.
  • 단, <dt>-<dd>가 반드시 하나의 짝으로 지어져야 되는 것은 아닙니다.
    • 그래서 <dt>는 하나 이상의 <dd>를 형제 요소로 가질 수 있습니다. (예: dt-dd-dd)
    • 그래서 하나 이상의 <dt>가 연속으로 나올 수 있습니다. (예: dt-dt-dd)
  • <div><dt>-<dd> 쌍을 감쌀 때 쓸 수 있지만, <dt>-<dd>의 형제 요소여서는 안 됩니다.
  • <dl>은 공백이 아닌 텍스트 노드와 <div>,<dt>,<dd>가 아닌 요소를 포함해서는 안 됩니다.

더 알아보기