<dl> 태그의 정의 및 사용법

<dl> 태그는
설명 목록(description list)를 나타내는 태그입니다.
이 태그는 이름(<dt> 태그를 사용하여 표시)과 이름에 대한 설명(<dd> 태그를 사용하여 제공)으로 구성된 그룹의 연관 목록입니다.

여기서 <dt>를 사용해서 표시하는 이름은 용어, 정의, 명칭, 주제, 질문 등을 말하며,
이름에 대한 설명은 <dd> 태그가 그 역할을 합니다.

사용 용도로서의 예제

다음은 <dl> 태그의 사용 용도로서의 예제입니다.
<dl> 태그를 어떤 용도의 설명 목록으로 사용하는지에 대해 쉽게 이해할 수 있습니다.

"용어"나 "정의"를 설명하는 목록으로 사용

HTML 
<p>HTML과 CSS의 설명입니다.</p>
<dl>
    <dt><dfn>HTML</dfn></dt>
    <dd>
        HyperText Markup Language의 약자로,
        웹 페이지를 작성하는 데 사용되는
        마크업 언어입니다.
    </dd>
    <dt><dfn>CSS</dfn></dt>
    <dd>
        Cascading Style Sheets의 약자로,
        웹 페이지의 스타일과 레이아웃을 지정하는데 사용되는
        스타일시트 언어입니다.
    </dd>
</dl>

알아두세요!
<dt> 태그 자체는 <dl>에 사용될 때 그 내용이 정의되는 용어임을 나타내지 않지만, <dfn> 태그을 사용하여 이를 나타낼 수 있습니다.

실제 적용된 모습

"명칭"을 설명하는 목록으로 사용

HTML 
<p>가장 인기있는 영화 주인공입니다.</p>
<dl>
    <dt>헤리 포터</dt>
    <dd>
        J.K. 롤링의 소설 '해리 포터' 시리즈의 주인공으로,
        마법사로서 모험을 겪는 소년입니다.
    </dd>
    <dt>루크 스카이워커</dt>
    <dd>
        '스타워즈' 시리즈에서 주요한 역할을 맡은 캐릭터로,
        제다이 기사로서 강력한 힘을 가진 인물입니다.
    </dd>
</dl>
실제 적용된 모습

"주제"를 설명하는 목록으로 사용

HTML 
<p>여행 계획을 주제로 설명합니다.</p>
<dl>
    <dt>여행 목적</dt>
    <dd>휴식, 관광, 탐험 등</dd>
    <dt>여행 기간</dt>
    <dd>짧은 여행 (1-3일), 중간 여행 (4-7일), 긴 여행 (8일 이상)</dd>
    <dt>여행 예산</dt>
    <dd>저예산, 중간 예산, 고예산</dd>
</dl>
실제 적용된 모습

"질문"을 설명하는 목록으로 사용

HTML 
<p>자주하는 질문과 답변입니다.</p>
<dl>
    <dt>Q: 제품 구매 방법은 무엇인가요?</dt>
    <dd>A: 제품은 온라인 쇼핑몰 또는 오프라인 매장에서 구매하실 수 있습니다.</dd>
    <dt>Q: 제품 사용 방법은 무엇인가요?</dt>
    <dd>A: 제품 사용 방법은 설명서를 참고하거나 제조사 홈페이지에서 확인하실 수 있습니다.</dd>
    <dt>Q: 제품에 문제가 발생하면 어떻게 해야 하나요?</dt>
    <dd>A: 제품에 문제가 발생하면 제조사 고객센터 또는 A/S 센터에 문의하시기 바랍니다.</dd>
 </dl>
실제 적용된 모습

복합적인 설명의 목록으로 사용

HTML 
<p>우리회사를 소개합니다.</p>
<dl>
    <dt>회사명</dt>
    <dd>우리회사</dd>
    <dt>설립일</dt>
    <dd>2012년 7월 30일</dd>
    <dt>사업 분야</dt>
    <dd>사회적으로 유익한 가치의 창출</dd>
    <dt>전화번호</dt>
    <dd>02-1234-5678</dd>
    <dt>사업 소개</dt>
    <dd>모든 사람을 위한 코딩 학습서입니다.</dd>
 </dl>
실제 적용된 모습

구문 구조로서의 예제

다음은 <dl> 태그의 구문 구조로서의 예제입니다.
<dl> 태그를 어떤 구조로 사용하는지에 대해 쉽게 이해할 수 있습니다.

단일 이름과 단일 설명

HTML 
<p>가장 인기있는 영화 주인공입니다.</p>
<dl>
    <dt>헤리 포터</dt>
    <dd>
        J.K. 롤링의 소설 '해리 포터' 시리즈의 주인공으로,
        마법사로서 모험을 겪는 소년입니다.
    </dd>
    <dt>루크 스카이워커</dt>
    <dd>
        '스타워즈' 시리즈에서 주요한 역할을 맡은 캐릭터로,
        제다이 기사로서 강력한 힘을 가진 인물입니다.
    </dd>
</dl>
실제 적용된 모습

여러 이름과 단일 설명

HTML 
<dl>
    <dt>미국</dt>
    <dt>미합중국<dt>
    <dd>주 50개와 특별구 1개로 이루어진 연방제 공화국이다.</dd>
</dl>
실제 적용된 모습

단일 이름과 여러 설명

HTML 
<dl>
    <dt>커피</dt>
    <dd>커피 나무의 열매로 만든 차</dd>
    <dd>좋아요! 아이스 아메리카노 😃</dd>
</dl>
웹 페이지에서 이모지(이모티콘) 사용하기
실제 적용된 모습

여러 이름과 여러 설명

위 예제들을 결합하여 여러 이름 여러 설명과 연결하는 것도 가능합니다.

이름과 설명을 <div> 태그로 감싸기

명세서에서는 스타일 지정을 돕기 위해 이름(<dt> 요소를 사용하여 표시)과 이름에 대한 설명(<dd> 요소를 사용하여 제공)으로 구성된 그룹을 <div> 태그로 감싸는 것도 좋은 방법이라고 명시하고 있습니다.

명세서에서는 <dl> 태그의 콘텐츠로 사용될 수 있는 요소를 명확히 했습니다.

<dl> 태그의 콘텐츠로 사용될 수 있는 요소
  • 하나 이상의 <dt> 요소와 하나 이상의 <dd> 요소로 구성한 그룹 0개 이상. 선택적으로 <script> 태그와 <template> 태그을 혼합 가능.
  • 또는, 하나 이상의 <div>. 선택적으로 <script>, <template> 혼합 가능.
HTML 
<style>
    .dl-item {
        padding: 1em;
        border-radius: 1em;
        background-color: beige;
    }
    .dl-item + .dl-item {
        margin-top: 1em;
    }
    .dl-item dt {
        font-weight: 600;
        margin-bottom: 0.3em;
    }
    .dl-item dd {
        margin: 0;
    }
</style>
<dl>
    <div class="dl-item">
        <dt>이름</dt>
        <dd>홍길동</dd>
    </div>
    <div class="dl-item">
        <dt>출생년도</dt>
        <dd>2002</dd>
    </div>
    <div class="dl-item">
        <dt>출생지</dt>
        <dd>서울</dd>
    </div>
    <div class="dl-item">
        <dt>좋아하는 색</dt>
        <dd>파랑</dd>
    </div>
</dl>
CSS rem과 em 단위
실제 적용된 모습

주의할 점

<dl> 태그는 대화형 마크업에 적합하지 않습니다.

이해를 돕기 위해 퀴즈를 <dl> 태그를 사용하여 마크업하는 예제를 보여드리겠습니다.

HTML 
<dl class="quiz">
    <dt>다음 중 세계에서 가장 큰 강은?</dt>
    <dd>
        <input type="radio" id="q1_choice1" name="q1" value="1">
        <label for="q1_choice1">아마존 강</label>
    </dd>
    <dd>
        <input type="radio" id="q1_choice2" name="q1" value="2">
        <label for="q1_choice2">니지니 강</label>
    </dd>
    <dd>
        <input type="radio" id="q1_choice3" name="q1" value="3">
        <label for="q1_choice3">양쯔강</label>
    </dd>
</dl>

퀴즈와 같은 대화형 콘텐츠를 효과적으로 마크업하는 한 가지 방법은 각 질문과 선택지를 적절한 요소로 그룹화하는 것입니다. 보통 퀴즈는 문답 형식으로 구성되어 있으므로 이에 맞게 마크업할 수 있습니다. 아래는 대화형 퀴즈를 <fieldset>과 <legend>를 사용하여 마크업하는 것을 대안으로 제시하는 예제입니다.

HTML 
<form>
    <fieldset>
        <legend>세계에서 가장 큰 강은?</legend>
        <p>
            <input type="radio" id="q1_choice1" name="q1" value="1">
            <label for="q1_choice1">아마존 강</label>
        </p>
        <p>
            <input type="radio" id="q1_choice2" name="q1" value="2">
            <label for="q1_choice2">니지니 강</label>
        </p>
        <p>
            <input type="radio" id="q1_choice3" name="q1" value="3">
            <label for="q1_choice3">양쯔강</label>
        </p>
      </fieldset>    
</form>

<dl> 태그를 네비게이션에 사용하는 것은 일반적으로 권장되지 않습니다.

아래의 예제와 같이 <dl> 태그를 네비게이션으로 사용하는 것은 일반적으로 잘못된 사용 사례입니다.
그러나 HTML의 유연성 때문에 이렇게 잘못된 방법으로 사용될 수 있습니다.

HTML 
<dl>
    <dt>메뉴</dt>
    <dd><a href="">회사 소개</a></dd>
    <dd><a href="">제품</a></dd>
    <dd><a href="">문의</a></dd>
</dl>

위의 예제에서는 <dl> 태그를 사용하여 네비게이션 메뉴를 표현하고 있습니다.
그러나 이것은 의미적으로 부적절하며, 잠재적으로 혼동을 야기할 수 있습니다. 일반적으로 네비게이션 메뉴는 목록(<ul>) 태그를 사용하여 마크업하는 것이 좋습니다.

HTML 
<nav>
    <ul>
        <li><a href="">회사 소개</a></li>
        <li><a href="">제품</a></li>
        <li><a href="">문의</a></li>
    </ul>
</nav>

위 코드에서는 <nav> 태그를 사용하여 네비게이션 메뉴를 감싸고, 각 메뉴 항목은 <ul>과 <li> 태그를 사용하여 나열되었습니다. 이제 이렇게 수정된 코드는 목록으로 표현된 네비게이션을 나타내고 있으며, 시맨틱하고 구조적으로 더 나은 표현이 됩니다.

브라우저 호환성

dl, dt, dd 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<dl> 1 12 1 4
<dt> 1 12 1 4
<dd> 1 12 1 4

명세서

dl, dt, dd 태그의 명세서 사양
명세서 사양
<dl> HTML Standard
#the-dl-element
<dt> HTML Standard
#the-dt-element
<dd> HTML Standard
#the-dd-element

참고문헌

같이 보기