용어(dt: definition term)와 정의(dd: definition description) 쌍. dl의 자식으로만 의미를 가진다. dl이 컨테이너라면 dt + dd가 실제 내용물.
SEO 관점에서 dt + dd 쌍이 정의 콘텐츠임을 검색엔진에 명시. 사이트의 용어집 페이지가 "X 뜻", "X 의미", "X란?" 검색에서 우선 노출.
GEO 관점에서 AI는 dt와 dd의 역할 분리를 명확히 인식. dt를 질문 측, dd를 답변 측으로 매칭해 답변을 생성. "GEO란?"에 dt "GEO"가 매칭 trigger, dd가 답변 텍스트로.
AEO 관점에서 정의형 Featured Snippet 카드 한 장 = dt + dd 한 쌍. "X 뜻" 검색에 페이지의 dt "X" + dd 정의가 그대로 카드로 노출.
A11y 관점에서 스크린리더가 "용어: X, 정의: Y" 형태로 발화. 사용자가 어느 게 용어이고 어느 게 정의인지 헷갈리지 않는다. 일반 텍스트의 "X: Y" 패턴보다 명확.
자주 보는 안티패턴: dl 없이 dt/dd 사용(부모가 dl이 아니면 시맨틱 무효), 순서 뒤집힘(dt가 먼저, dd가 따라옴 — 반대로 박는 패턴은 의미 모호), dt 안에 블록 요소(p, div 같은 블록은 일부만 허용 — 헤딩은 안 됨), dd의 시각 들여쓰기를 박기 위해 dl 누락하고 padding-left만 적용(시각만 정의 목록처럼, 시맨틱 0).
dt와 dd의 카디널리티 — 한 dt에 여러 dd(한 용어 여러 정의), 여러 dt에 한 dd(동의어가 같은 정의 공유), 여러 dt + 여러 dd(한 그룹의 여러 용어가 여러 정의 측면 공유). 모든 조합이 명세에서 허용.
dl 안 div 그룹화와 dt/dd — HTML 5.1 이후 <dl><div><dt>...</dt><dd>...</dd></div></dl> 패턴 허용. CSS grid·flex로 디자인을 적용할 때 — 각 dt+dd 쌍을 div로 감싸면 시각적으로 한 줄에 두기 쉽다. 시맨틱 보존.
dt 안 콘텐츠 허용 범위 — 명세상 flow content이지만 헤딩·sectioning·header·footer는 제외. 즉 dt 안에 a 링크, em/strong, code 등 인라인은 OK이지만 — h2, article, header는 안 됨. dd는 더 자유로워 대부분의 콘텐츠가 들어갈 수 있다.
이 카드를 dt-dd 단일 카드로 묶은 이유 — 두 태그가 항상 쌍으로 등장하고, 각각의 의미가 상대에 의해 정의되기 때문. 도감의 통합 카드 패턴(시리즈 #4 details/summary, #16 skip-link-keyboard 같은) 적용.