dl, dt, dd는 언제 쓰는 걸까?

dl은 Description-List, dt는 Description-Term, 그리고 dd는 Description-Description의 약자입니다. 하지만 대부분 dl보다 ol, 그보다 ul이 더 익숙하게 느껴질 것으로 생각합니다. 그럼 dl은 왜 있는 것이고, 언제 쓰는 것일까요? 단순히 어떤 용어와 그 설명을 마크업 할 때일까요?

사실 다들 아시다시피 ol은 순서 있는 목록에, ul은 순서 없는 목록에 사용하게 되어 있습니다. 편의상 ul로 통일해서 사용하는 경우가 많지만, 웹 접근성을 생각한다면 존재 목적에 따라 태그를 신중하게 사용해야 합니다.

그렇다면 dl도 언제 써야 할 지 파악해야겠지요. MDN을 포함한 각종 레퍼런스 사이트에 찾아보면 dl, dt, dd 개념을 꽤 이상적(?)인 예시로 풀어 설명하고 있습니다만, 체감상 어떻게 자신의 코드에 적용해야 할지 애매하게 느껴졌습니다. 그래서 실제로는 어떻게 사용하는지 연구해봤습니다.

그 결과, 다음의 형태에 가장 적합하다는 것을 알게 되었습니다.

(A) is (B) 형태일 때

• (A)는 Name. 즉, 상위 또는 추상적 개념
• (B)는 Value. 즉, 하위 또는 구체적 내용

1. 메타데이터를 표시

예시

유형 : 열정적인 중재자(INFP)

적용

<dl>
  <dt>유형</dt>
  <dd>열정적인 중재자</dd>
  <dd>INFP</dd>
</dl>

2. 대상을 정의(설명)

예시

열정적인 중재자(INFP) : 최악의 상황이나 악한 사람에게서도 좋은 면만을 바라보며 긍정적이고 더 나은 상황을 만들고자 노력하는 진정한 이상주의자입니다.

적용

<dl>
  <dt>열정적인 중재자</dt>
  <dt>INFP</dt>
  <dd>최악의 상황이나 …(생략) 진정한 이상주의자입니다.</dd>
</dl>

주의사항

• <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>가 아닌 요소를 포함해서는 안 됩니다.

더 알아보기

• dl : The Description List element | MDN
• HTML Standard - 4.4.9 The dl element | WHATWG
• HTML 5.2: 4.4. Grouping content | WC3
• dl 요소의 용법이 헷갈립니다 | Hashcode