HTML `<dl>` 태그, 잊혀진 시맨틱의 작은 보석

우리가 그동안 외면해온 HTML 태그 이야기

HTML 태그라고 하면 보통 <div>, <span>, 리스트로는 <ul>이나 <ol> 정도까지가 익숙하실 거예요. 그런데 <dl> 태그를 써보신 적이 있나요? "그런 게 있었어?" 싶은 분들이 대부분일 거라 생각해요. 사실 저도 오랫동안 이 태그를 알기만 하고 어디에 써야 할지 감이 잡히지 않던 시절이 있었거든요. 그런데 이 작고 잊혀진 태그가 사실은 시맨틱 HTML의 보석 같은 존재라는 걸 알게 되면, 앞으로 마크업을 짜는 방식이 조금은 달라질 수도 있어요.

<dl>은 description list, 우리말로 옮기면 "설명 목록"이라는 뜻이에요. 한 쌍의 짝을 표현하기 위해 만들어진 태그인데요. <dt>는 description term, 그러니까 "용어"나 "이름"을 담는 자리고요. <dd>는 description detail, 그 용어에 대한 "설명"이나 "값"을 담는 자리예요. 마치 사전을 펼치면 단어가 굵게 나오고 그 아래 풀이가 따라붙는 것과 똑같은 구조라고 보시면 돼요.

어디에 쓰면 좋을까

가장 흔한 활용처는 용어집(glossary) 같은 페이지예요. 기술 용어를 모아둔 페이지를 만든다고 생각해보세요. "API"라는 용어가 있고 그 아래에 "응용 프로그램이 서로 통신하는 방법…"이라는 설명이 따라붙는 구조. 이런 곳에 딱이에요. <ul>에 강제로 두 줄씩 끼워 넣는 것보다 훨씬 의미가 명확해지죠.

또 하나 자주 놓치는 활용처가 메타데이터 표시예요. 블로그 글 상단에 "작성자: 홍길동", "작성일: 2026년 5월", "카테고리: 개발" 같은 정보 있잖아요. 이런 키-값 쌍들이 사실 <dl>의 완벽한 사용처거든요. 그런데 우리는 보통 <div class="meta">로 떡칠을 해놓곤 하죠.

상품 페이지의 스펙 표시도 마찬가지예요. "무게: 1.2kg", "크기: 30cm", "재질: 알루미늄" 이런 식의 정보들. 표로 만들기엔 가로 셀이 너무 비어 보이고, 그냥 텍스트로 쓰자니 구조가 없어 보이는 그 애매한 영역. 거기에 <dl>이 들어가면 의미도 살고 스타일링도 자유로워져요.

흔한 오해와 함정

예전 HTML4 시절엔 <dl>을 대화 표시용으로 쓰는 게 허용됐어요. 영화 대본처럼 "톰: 안녕", "제리: 안녕" 이런 식으로요. 그런데 HTML5에 들어서면서 이 용도는 권장되지 않게 됐어요. 대화는 의미적으로 "정의-설명" 구조가 아니라서요. 만약 대화 같은 게 필요하다면 <p> 안에 화자 이름을 적절히 마크업하는 게 더 적합하답니다.

또 재밌는 점은, 하나의 <dt>에 여러 개의 <dd>가 따라붙어도 되고, 여러 개의 <dt>가 하나의 <dd>를 공유해도 된다는 거예요. 예를 들어 "고양이"와 "냥이"라는 두 용어가 사실 같은 의미라면 <dt>고양이</dt><dt>냥이</dt><dd>네 발 달린 귀여운 동물</dd> 식으로 묶을 수 있어요. HTML5에서는 이걸 <div>로 감싸서 한 묶음으로 그룹화하는 것도 허용해요.

접근성과 시맨틱의 가치

이 태그가 진짜로 빛나는 순간은 스크린리더를 쓰는 사용자에게서예요. 보조 기술은 <dl>을 만나면 "설명 목록, 항목 N개"라고 안내해주거든요. 그러면 시각장애가 있는 사용자도 "아, 여기는 키와 값이 짝지어진 정보 영역이구나" 하고 바로 이해할 수 있어요. 그냥 <div> 안에 텍스트만 잔뜩 있으면 이런 맥락이 전달되지 않죠.

요즘 웹 접근성, 그러니까 a11y(accessibility의 줄임말로, a와 y 사이에 글자가 11개 있어서 이렇게 부른답니다)가 점점 더 중요해지고 있잖아요. 유럽연합의 EAA(European Accessibility Act)나 한국의 웹 접근성 의무화 같은 흐름 속에서, 시맨틱 HTML을 제대로 쓰는 건 단순히 코드 미학의 문제가 아니라 실제 사용자 경험과 법적 의무가 걸린 문제가 됐어요.

한국 개발자에게 주는 메시지

리액트나 Vue 같은 프레임워크로 작업하다 보면 모든 걸 <div>로 우겨넣는 습관에 빠지기 쉬워요. 컴포넌트로 추상화되면서 "어차피 CSS로 모양만 잡으면 되지" 싶거든요. 그런데 그 안에서 의미를 잃은 마크업은 검색 엔진 최적화(SEO)에도, 접근성에도, 미래의 유지보수에도 다 손해예요.

당장 사이드 프로젝트나 회사 프로젝트에서 메타데이터 영역, FAQ, 사용자 프로필의 정보 나열 영역을 한 번 돌아보세요. "여기 <dl>이 더 어울리지 않을까?" 싶은 곳이 분명 있을 거예요. 큰 리팩터링 없이도, 작은 시맨틱 개선만으로 코드의 품질이 한 단계 올라가는 경험을 해볼 수 있답니다.

마무리

<dl>은 화려하진 않지만, 알고 있으면 마크업의 어휘력이 확 넓어지는 그런 태그예요. 모든 키-값 정보에 <div> 두 줄 대신 의미 있는 한 묶음을 쓸 수 있다는 것, 그게 시맨틱 HTML의 작은 즐거움이죠.

여러분은 평소 마크업할 때 어떤 시맨틱 태그를 가장 의식적으로 챙기시나요? <dl> 말고도 잊혀진 보석 같은 태그가 또 있다고 생각하시면 한번 공유해 주세요!