telexed ~ c / 405ab2ff-7e0radar:40 · otherLIVE
← 피드로
NO.
#405ab2ff
분야
기타
출처
Simon Willison
게재
2026-05-23 20:24:48
중요도
★ 4/10 — radar 40

`<dl>`은 정의 목록이 아니라 설명 목록이다

`<dl>` Is for Description Lists, and It Supports More Structure Than Expected

메타데이터, 크레딧, 스펙, 설정값 UI를 가짜 테이블 없이 HTML 시맨틱으로 처리할 수 있다. 작지만 접근성 있는 마크업 정리에 바로 써먹을 만함.

[ 요점 ]
  1. 하나의 <dt> 뒤에 여러 개의 <dd>를 둘 수 있다. 공동 저자, 별칭, 태그, 스펙 값처럼 1:N 정보에 잘 맞음.
  2. <dt><dd> 묶음은 스타일링용 div로 감쌀 수 있다. 단, 허용되는 래퍼는 `div`뿐이라 컴포넌트 설계 때 주의.
  3. aria-labelledby<dl> 자체에 라벨을 붙일 수 있다. 화면에는 간결하게 두고 스크린리더 맥락은 보강 가능.
  4. 2008년 HTML5 초안 이후 명칭은 definition list가 아니라 description list. 용도도 단어 정의보다 넓게 잡는 게 맞다.
원문simonwillison.net/2026/May/23/on-the-dl/#atom-everything원문 보기 →

// related