HTML의 <dl> 요소는 설명 목록(Description List)을 정의하는 데 사용됩니다. HTML4 시절에는 <dl>이 '정의 목록(Definition List)'이라고 불렸지만, HTML5부터는 용어와 그에 대한 설명을 짝지어 나열하는 '설명 목록'으로 명칭과 역할이 정리되었습니다.
<dl> 태그는 단독으로 쓰이지 않으며, 반드시 아래 두 가지 하위 태그와 함께 사용해야 합니다.
- <dt>(description term): 목록에 나열할 용어를 정의합니다.
- <dd>(description details): 해당 용어에 대한 설명을 작성합니다.
예제
다음은 <dl> 태그를 활용해 스포츠 종목별 소개 목록을 만든 예제입니다.
<!DOCTYPE html>
<html>
<body>
<h2>Sports</h2>
<dl>
<dt>축구</dt>
<dd>전 세계 200여 개 국가에서 2억 5천만 명 이상의 선수가 즐기는 스포츠입니다.</dd>
<dt>크리켓</dt>
<dd>11명씩 두 팀이 필드에서 배트와 공으로 겨루는 경기입니다.</dd>
<dt>하키</dt>
<dd>밴디, 필드하키, 아이스하키 등 여러 종류가 있습니다.</dd>
<dt>골프</dt>
<dd>다양한 클럽으로 공을 쳐서 최소 타수로 코스의 홀에 공을 넣는 스포츠입니다.</dd>
</dl>
</body>
</html>
실행 결과
위 예제에서는 각 스포츠 종목을 <dt>로 지정하고, 종목에 대한 설명을 <dd>로 작성하여 하나의 설명 목록을 구성했습니다.
<dl>
<dt>축구</dt>
<dd>전 세계 200여 개 국가에서 2억 5천만 명 이상의 선수가 즐기는 스포츠입니다.</dd>
<dt>크리켓</dt>
<dd>11명씩 두 팀이 필드에서 배트와 공으로 겨루는 경기입니다.</dd>
<dt>하키</dt>
<dd>밴디, 필드하키, 아이스하키 등 여러 종류가 있습니다.</dd>
<dt>골프</dt>
<dd>다양한 클럽으로 공을 쳐서 최소 타수로 코스의 홀에 공을 넣는 스포츠입니다.</dd>
</dl>
<dt>와 <dd>의 차이점
<dt> 요소는 설명 목록에서 하나의 용어(term)를 정의하는 역할을 하며, 주로 일반 텍스트로 작성합니다. 반면 <dd> 요소는 용어에 대한 설명을 담는 컨테이너 역할을 하기 때문에, 내부에 링크(<a>), 이미지(<img>), 줄바꿈(<br>) 등 다양한 요소를 자유롭게 포함할 수 있다는 차이가 있습니다.
활용 팁
<dl> 태그는 용어 사전, FAQ 페이지, 저자·작성일 같은 메타데이터 표시 등 '항목–설명' 쌍으로 구성된 정보를 나타낼 때 특히 유용합니다. 순서가 중요하지 않은 데이터를 구조화하고 싶다면 <ul> 대신 <dl>을 고려해 보세요.