<dl> — 리스트 태그 도감

올바른 사용

dt(용어) + dd(정의) 쌍으로 구성

한 dt에 여러 dd 가능

여러 dt가 같은 dd를 공유 가능

key-value 정보·용어집·메타 정보에

용어 정의

<dl>
  <dt>SEO</dt>
  <dd>Search Engine Optimization. 검색엔진 최적화의 약자.</dd>

  <dt>GEO</dt>
  <dd>Generative Engine Optimization. 생성형 AI 검색 최적화.</dd>
</dl>

가장 기본 패턴. 용어집·FAQ에 빈번.

한 dt에 여러 dd

<dl>
  <dt>접근성</dt>
  <dd>장애가 있는 사용자가 콘텐츠에 접근 가능한 정도.</dd>
  <dd>WCAG·KWCAG 표준에 따른 마크업 품질.</dd>
</dl>

한 용어에 여러 정의 측면.

div 그룹화로 디자인

<dl>
  <div className="row">
    <dt>SEO</dt>
    <dd>검색엔진 최적화</dd>
  </div>
  <div className="row">
    <dt>GEO</dt>
    <dd>생성엔진 최적화</dd>
  </div>
</dl>

HTML 5.1부터 dl 직속 div로 그룹화 허용. CSS grid 적용에 유용.

자주 보는 안티패턴

div + dt/dd 깔끔하게 그룹화 안 함

key-value를 table로 (단순 쌍은 dl이 적절)

dt 없는 dd 또는 dd 없는 dt

Ben Myers가 짚은 기본 시맨틱 누락 안티패턴

dt 없는 dd

<dl>
  <dd>정의만 있고 용어 없음</dd>
</dl>

시맨틱 위반. dt 없으면 정의의 대상이 없다.

단순 쌍을 table로

<table>
  <tr><td>SEO</td><td>검색엔진 최적화</td></tr>
  <tr><td>GEO</td><td>생성엔진 최적화</td></tr>
</table>

table은 행-열 데이터. 용어-정의 쌍은 dl이 시맨틱.

해설

정의 목록(description list). 용어-정의 쌍, 이름-값 메타 정보, 키-값 데이터의 시맨틱. 시리즈 시작점이 된 Ben Myers의 On the <dl> 글이 이 태그를 깊이 다뤘다.

SEO 관점에서 용어집·정의 콘텐츠의 시맨틱. 사이트의 용어 학습 페이지가 검색에 노출될 때 dl 마크업이 정의 형태임을 검색엔진에 명시. 일반 텍스트 정의보다 dl의 정의 페이지가 "X 뜻은?" 검색에서 우선.

GEO 관점에서 AI가 "X란 무엇인가?"에 답할 때 dl이 1순위 자료. dt가 용어, dd가 정의임이 명확해 — AI가 인용을 추측 없이 만든다. "GEO란?"에 페이지의 dt "GEO" + dd "Generative Engine..."이 그대로 답변.

AEO 관점에서 정의형 Featured Snippet의 직접 소스. 구글 검색에 "X 의미" 검색하면 — 상단에 정의 카드가 노출. dl + dt + dd 페이지가 그 카드의 원본.

A11y 관점에서 스크린리더가 "정의 목록"으로 인지하고 각 항목을 "용어: SEO. 정의: 검색엔진 최적화." 형태로 발화. 사용자가 용어와 정의의 관계를 청각적으로 명확히 따라간다.

자주 보는 안티패턴: 단순 쌍을 table로(table은 행-열 데이터, 단순 용어-정의 쌍은 dl이 시맨틱), dt 없는 dd 또는 dd 없는 dt(쌍이 깨짐), div + dt/dd로 그룹화 안 함(HTML 5.1 이후 dl 직속 div 그룹화 허용 — 디자인 적용 편리), Ben Myers가 짚은 dl의 일반적 누락(많은 사이트가 용어 정의를 일반 p로 처리해 시맨틱 손실).

HTML 5.1부터 추가된 dl 직속 div 그룹화 패턴 — CSS grid나 flex를 dt/dd에 적용하려면 각 쌍을 div로 감싸는 게 필요. 이 div 그룹화는 명세에서 허용되며 시맨틱도 보존.

dt + dd의 카디널리티 — 1:1(가장 흔함), 1:N(한 용어에 여러 정의), N:1(여러 용어가 같은 정의), N:N(여러 용어 + 여러 정의 측면). 모든 조합이 가능하며 각각 시맨틱하게 인식.

dl의 활용처 — 용어집, FAQ, 정의 목록, 메타 정보 시트("작성자: ..., 발행일: ..., 카테고리: ..."), 제품 스펙("무게: 1kg, 크기: ..., 가격: ..."). 시각적으로는 table처럼 보일 수 있지만 — 데이터의 행-열 관계가 아닌 용어-정의의 단방향 매핑이면 dl.

이 도감에서 dl은 상세 페이지 사이드바에 적용 가능 — "카테고리: 메타, 위치: <head>, 필수: 예" 같은 메타 정보 시트. 현재는 ul + p 패턴이지만 dl로 리팩토링하면 시맨틱 더 명확.

SEO·GEO·AEO·A11y 4축에서의 의미

SEO

GEO

AEO

A11y

올바른 사용

자주 보는 안티패턴

해설