HTML5에서 정의 목록(dl)을 만드는 방법

HTML5에서 정의 목록(Definition List)을 추가하려면 <dl> 태그를 사용합니다. HTML의 <dl>(description list) 태그는 용어와 그에 대한 설명을 짝지어 나열하는 목록을 선언할 때 사용되며, 이 안에는 <dt>와 <dd> 태그가 함께 사용됩니다.

정의 목록은 다른 종류의 목록과 비슷하지만, 각 항목이 용어(term)와 설명(description)이라는 두 개의 요소로 구성된다는 점이 특징입니다.

정의 목록을 구성하는 주요 태그

<dl> : 정의 목록 전체를 감싸는 컨테이너 태그입니다.
<dt> : 정의하고자 하는 용어(term)를 나타냅니다.
<dd> : 해당 용어에 대한 설명이나 정의를 나타냅니다.

예제

다음 코드를 실행하면 HTML5에서 정의 목록이 어떻게 만들어지고 화면에 표시되는지 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML dl Tag</title>
   </head>
   <body>
      <dl>
         <dt>Definition List</dt>
         <dd>A list of terms and their definitions/descriptions.</dd>
         <dt>C++</dt>
         <dd>C++ tutorial.</dd>
         <dt>Java</dt>
         <dd>Java tutorial.</dd>
      </dl>
   </body>
</html>

실행 결과

위 코드를 브라우저에서 실행하면 각 용어(<dt>)가 먼저 출력되고, 바로 아래에 해당 설명(<dd>)이 들여쓰기 된 형태로 표시됩니다. 예를 들어 'C++'이라는 용어 아래에 'C++ tutorial.'이라는 설명이 나타나는 식입니다.

이처럼 정의 목록은 용어집, FAQ, 사전 형식의 콘텐츠처럼 항목과 설명을 명확하게 구분해 보여줘야 할 때 매우 유용하게 활용할 수 있습니다.