# dl, dt, dd 태그를 남용하지 마세요.

### dl 은 Definition list 또는 description list

국내 사이트에는 구조화하여 마크업하기 쉽다는 이유로 무의식적으로 \<dl>, \<dt>, \<dd>를 많이 사용한다.  사용 목적을 잘 이해하지 않고 시맨틱하다고 생각하고 사용하는 경우도 많다.

다음의 예제 화면을 보자.

![](/files/-Lmilr7UXzSilYmoKiaF)

```markup
<dl>
    <dt>Cabin Class</dt>
    <dd><input type="radio" id="cla-1">
        <label for="cla-1">Economy Class</label>
    </dd>
    <dd><input type="radio" id="cla-2">
        <label for="cla-2">Prestige Class</label>
    </dd>
    <dd><input type="radio" id="cla-3">
        <label for="cla-3">First Class</label>
    </dd>
</dl>
```

처음 이렇게 제작해 놓고 잘 구조화 해놓았고 좋아했지만, 이런 형태는 정의형 목록도 아니고 설명을 위한 목록도 아니다.&#x20;

다음의 더 신박한 마크업을 보자.

![](/files/-Lo3UV8bO3NNv7gj7Ewb)

```markup
<dl>
    <dt><label for="ad">비밀번호</label></dt>
    <dd><input type="text" id="ad"></dd>
</dl>
```

이런 방법으로 제작하는 사람이 정말 드물겠지만(?), 이런 방법으로 마크업하는 사람도 있다. 물론 이것도 \<dl>\<dt>\<dd>의 사용목적과 맞지 않다.

정의형(설명형) 목록에서 \<dd>는 값이 바뀔 수 있다면, 그건 정의형이 될 수 없기 때문이다. 이미 정의가 되어 있거나 설명이 정해져 있는 경우에만 사용할 수 있는 태그인 것이다.

### 국내 포털 사이트에서는 잘 사용하고 있을까?

#### Daum의 메뉴

모 포털사이트의 메뉴 영역을 \<dl>\<dt>\<dd>로 사용하고 있다.

![다음 포털사이트의 메뉴를 dl, dt, dd로 사용 ](/files/-LmiogSCIKAEEK1sT72l)

```markup
<dl>
    <dt>커뮤니케이션</dt>
        <dd>메일</dd>
        <dd>카페</dd>
        <dd>블로그</dd>
        <dd>티스토리</dd>
        <dd>브런치</dd>
        <dd>아지트</dd>
        <dd>카카오스토리</dd>
</dl>
<dl>
    <dt>미디어</dt>
        <dd>뉴스</dd>
        <dd>스포츠</dd>
        <dd>연예</dd>
</dl>
.... 
```

위와 같이 마크업하였을 경우, 일단 가장 문제되는 것은 스크린리더 사용자들은 전체 메뉴구조를 파악할 수 없다는 것이다. 같은 제목 아래 한 개의 리스트로 있어야 존재해야 하는 항목을 단지 레이아웃 배치를 위해 9개의 \<dl>을 사용하고 있다.  그리고 메뉴의 뎁스 구조를 \<dt>\<dd>로 표현했을 뿐 정의형도 아니고 설명을 위한 구조도 아닌 것이다.&#x20;

시맨틱하고 접근성을 고려한 마크업은 전체 1개의 \<ul>로 제작하고 하위 \<ul>태그로 구조화하는 것이 더 적절한 방법이다.

또 다른 포털사이트의 뉴스 페이지이다. 사진과 설명글을 \<dl>\<dt>\<dd>로 마크업하였다.

#### 네이버의 뉴스

![이미지와 이미지 설명을 dl, dt, dd](/files/-LmioJ4_Nz-6CP9ixSsi)

```markup
<dl>
    <dt><img src="비건.jpg" alt="훈련 끝 대화시작? 방한 비건에 쏠린 눈"></dt>
    <dd>훈련 끝 대화시작? 방한 비건에 쏠린 눈</dd>
</dl>  
```

HTML5에서는 description 의 역할이 가능하므로 이미지의 설명으로는 문제가 없을 것 같은 마크업이다. 하지만 소스를 들여다 보면, 이미지의 alt 속성의 값이 \<dd>에 동일한 문구로 중복으로 삽입되는 것이 문제인 것이다.  시맨틱하게 마크업을 할 수 있다면 \<figure>태그를 사용하는 것이 더 적절한 것이다.

### \<dl>\<dt>\<dd>는 1:1로 쌍을 이룰 때 사용하는 것을 권장

스크린리더는 \<dt>와 \<dd>를 1:1로 쌍을 이룰 때 사용하는 것이 가장 정확한 의미를 읽어내어 스크린리더 사용자의 이해가 쉬워진다. 반드시 정의형이나 설명형을 만족하지 않더라도 제목과 데이터가 1:1로 쌍을 이룰 때만 사용하는 것을 권장한다.

\<dt>는 1개이고 \<dd>가 2개 이상을 사용해도 문법 오류는 발생하지 않지만, \<dl>\<dt>\<dd> 태그 사용이 적합한 구조인지 다시 한번 생각해 보는 것이 좋다.&#x20;

{% embed url="<https://youtu.be/msrOAsNd00w>" %}

{% embed url="<https://youtu.be/GwAgf2xW3c4>" %}

{% hint style="info" %}
\<dl> 태그 또한 \<ul>이나 \<ol>과 마찬가지로 화면에 보이는 병렬 배치를 위해 여러 개를 사용하지 않도록 해야 한다.  스크린리더 사용자는 몇 개의 리스트를 더 탐색해야  하는 건지 전혀 예측이 안되기 때문이다.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://aoa.gitbook.io/skymimo/aoa-2019/tips-2/dl-dt-dd-..md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.