> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/html-and-css/html/undefined-4/undefined-7.md).

# 설명 목록

정의 목록은 한 쌍을 이룬 용어와 설명을 그룹 짓는 역할을 한다. 

| 요소    | 용어 설                        | 설명                     |
| ----- | --------------------------- | ---------------------- |
| \<dl> | 설명목록(Description List)      | 용어와 설명 묶어주는 그룹 역할을 한다. |
| \<dt> | 용어(Description Term)        | 내부에 해당하는 용어를 한다.       |
| \<dd> | 설명(Description Description) | 용어를 설명하는 역할을 한다.       |

### 특징

* `<dt>`는 인라인 요소이며, `<dd>`는 블럭 요소이다.
* `<dd>`는 바뀌는 값이 아닌 이미 설명이 정해져 있는 경우에만 사용한다.&#x20;
* 스크린리더는 `<dt>`, `<dd>`가 한 쌍을 이룰 때 가장 정확게 읽어낸다. 그렇기 때문에 제목과 데이터가 1:1로 쌍을 이룰 때만 사용하는 것을 권장한다.
* 하나의 `<dt>`에 두 개 이상의 `<dd>`를 사용해도 문법에 오류는 없지만 요소 사용이 적합한 구조인지 점검하는 것이 좋다.&#x20;
* `<dt>`, `<dd>` 요소를 하나 이상 감싸는 `<div>` 요소를 `<dl>` 내부에 구성할 수 있다. 참고로 `<dl>` 내에 사용 되는 `<div>` 요소는 하나 이상의 `<dt>`, `<dd>`를 감싸는 용도로만 사용할 수 있. 그리고 `<div>`와 `<dt>`, `<dd>` 요소는 형제 노드여서는 안된다.  &#x20;
  * [\<dl> 요소 사용 방법 설명 및 예시(답변 확인 하기)](https://hashcode.co.kr/questions/5358/dldescription-list%EC%9A%94%EC%86%8C%EC%9D%98-%EC%9A%A9%EB%B2%95%EC%9D%B4-%ED%97%B7%EA%B0%88%EB%A6%BD%EB%8B%88%EB%8B%A4)

### 예시 &#x20;

```markup
<body>
  <dl>
    <dt>용어의 제목</dt>
    <dd>용어의 설명</dd>
  </dl>
</body>
<!----------------->
<dl>
 <dt> Authors
 <dd> John
 <dd> Luke
 <dt> Editor
 <dd> Frank
</dl>   
<!----------------->
<dl>
 <dt> Last modified time </dt>
 <dd> 2004-12-23T23:33Z </dd>
 <dt> Recommended update interval </dt>
 <dd> 60s </dd>
 <dt> Authors </dt>
 <dt> Editors </dt>
 <dd> Robert Rothman </dd>
 <dd> Daniel Jackson </dd>
</dl>
```

### 참고&#x20;

* 접근성 고려 → [dl, dt, dd 태그를 남용하지 마세요](https://aoa.gitbook.io/skymimo/aoa-2019/tip/dl-dt-dd-.)
* [\<dl> 요소 사용 방법 설명 및 예시(답변 확인 하기)](https://hashcode.co.kr/questions/5358/dldescription-list%EC%9A%94%EC%86%8C%EC%9D%98-%EC%9A%A9%EB%B2%95%EC%9D%B4-%ED%97%B7%EA%B0%88%EB%A6%BD%EB%8B%88%EB%8B%A4)
* \[MDN] \<dl> [설명 목록](https://developer.mozilla.org/ko/docs/Web/HTML/Element/dl)
* \[MDN] \<dt> [용어](https://developer.mozilla.org/ko/docs/Web/HTML/Element/dt)
* \[MDN] \<dd> [용어 설명](https://developer.mozilla.org/ko/docs/Web/HTML/Element/dd)
* \[W3C] [the dl element](https://www.w3.org/TR/2011/WD-html5-author-20110809/the-dl-element.html)&#x20;
* \[W3C] [the dt element](https://www.w3.org/TR/2011/WD-html5-author-20110809/the-dt-element.html)&#x20;
* \[W3C] [the dd element](https://www.w3.org/TR/2011/WD-html5-author-20110809/the-dd-element.html)&#x20;