HTML의 `<dl>`이 생각보다 쓸모 많은 이유

• <dl>은 HTML에서 은근히 저평가된 요소라는 게 글의 핵심임

  • 정식 이름은 description list고, 이름-값 쌍을 표현할 때 쓰는 목록임
  • 숙소 편의시설, 월세 청구 항목, 기술 용어집, 상품 스펙, 게임 능력치표처럼 웹 UI에서 엄청 자주 나오는 패턴에 맞음

• 구성은 생각보다 단순함: <dl>이 전체 목록, <dt>가 이름, <dd>가 값임

  • <dt>는 description term, 즉 항목의 이름 쪽을 맡음
  • <dd>는 description detail, 즉 그 이름에 대응하는 값이나 설명을 맡음
  • <ul>과 <li>가 일반 목록을 만들듯, <dl>·<dt>·<dd>는 이름-값 목록을 만드는 조합임

• 하나의 이름에 값이 여러 개여도 문제 없음

  • 예를 들어 책 한 권에 저자가 여러 명이면 <dt> 하나 아래에 <dd>를 여러 개 붙일 수 있음
  • 반대로 여러 이름이 하나의 설명을 공유하는 식의 구조도 스펙상 가능해서, 단순한 1:1 테이블보다 표현 범위가 넓음

• 스타일링 때문에 그룹을 감싸고 싶다면 <div>만 허용됨

  • <dt>와 그에 딸린 <dd>들을 하나의 묶음으로 감싸 레이아웃을 잡을 수 있음
  • 다만 이때 래퍼로 쓸 수 있는 건 <div>뿐이라, 아무 요소나 끼워 넣는 식으로 마크업하면 안 됨

• 왜 굳이 시맨틱이 필요하냐는 질문에, 글은 접근성 관점으로 답함

  • 중첩 <div>로도 화면은 비슷하게 만들 수 있지만, 브라우저와 보조기술 입장에선 그냥 텍스트 덩어리로 보일 수 있음
  • <dl>을 쓰면 스크린리더가 '이건 이름-값 목록'이라는 구조를 이해할 여지가 생김
  • 사용자는 목록에 몇 개의 그룹이 있는지, 지금 어디쯤 읽고 있는지, 관심 없으면 통째로 건너뛸 수 있는지 같은 탐색 힌트를 받을 수 있음

• 저자는 시맨틱 요소를 고를 때 이런 질문을 던져보라고 함

  • '컴퓨터가 이 패턴을 알아볼 수 있다면 사용자에게 어떤 이득이 생길까?'
  • 이득이 하나라도 명확하게 떠오르면, 그 패턴은 별도 시맨틱을 가질 후보라는 얘기임
  • <dl>의 경우 스크린리더 경험 개선이 꽤 직접적인 이득으로 제시됨

• 단, 모든 브라우저와 스크린리더 조합에서 지원이 완벽한 건 아님

  • 대부분 조합에서는 <dl>의 장점을 얻을 수 있지만, 보편 지원이라고 말하긴 어렵다고 선을 그음
  • 특정 사용 사례에서 fallback이 아쉽다면 <ul> 같은 대안을 선택할 수도 있음

• 글에서 제일 재밌는 예시는 Dungeons & Dragons 능력치 블록임

  • 능력치, 공격, 특성처럼 겉보기엔 서로 다른 UI가 사실상 전부 이름-값 쌍으로 구성돼 있음
  • 저자는 한 statblock 안에서 <dl> 후보를 5개나 봤다고 함
  • 이 예시가 좋은 이유는 <dl>이 단조로운 용어집뿐 아니라 복잡한 정보 카드에도 적용될 수 있다는 걸 보여주기 때문임

---

기술 맥락

• 여기서 중요한 선택은 라벨과 값을 <div> 두 개로 배치할지, <dl>·<dt>·<dd>로 의미를 줄지예요. 화면만 보면 둘 다 비슷하지만, 브라우저와 보조기술이 이해하는 구조는 완전히 달라질 수 있거든요.

• <dl>을 고르는 이유는 접근성 정보를 HTML 자체에 담을 수 있기 때문이에요. 스크린리더가 이 구조를 목록으로 인식하면 사용자는 항목 개수, 현재 위치, 목록 건너뛰기 같은 탐색상의 도움을 받을 수 있어요.

• 대안으로는 <ul>이나 중첩 <div>가 있어요. <ul>은 지원이 더 안정적으로 느껴질 수 있지만 이름-값 관계를 직접 표현하진 못하고, <div>는 스타일링은 편하지만 의미가 거의 없어요. 그래서 정보 구조가 명확한 UI라면 <dl>을 먼저 검토할 만해요.

• 실무에서는 제품 스펙, 결제 내역, 프로필 메타데이터, 설정 요약 화면에서 특히 자주 마주쳐요. 이런 컴포넌트는 디자인 시스템에 한 번 들어가면 여러 화면에 퍼지기 때문에, 처음부터 시맨틱을 맞춰두는 게 나중에 접근성 품질을 유지하기 쉬워요.