[HTML / 시맨틱 마크업] 정의 목록 (Description List)

 

정의 목록을 사용하는 경우

1. 용어를 정의할 때

2. key-value로 정보를 제공할 때

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

 

 

 

정의 목록을 사용하는 이유

• 단순히 용어 정의 시 사용할 수도 있지만 key-value 형태의 정보를 전달 할 때 <span>, <div>보다 훨씬 더 풍부한 의미를 전달할 수 있기도 하다.
• 보통 손으로 필기할 때, 어떤 용어에 대한 정의를 나타내는 경우 콜론(:)이나 세미콜론(;)을 사용하곤 한다. 하지만 HTML 문서를 작성할 때는 콜론이나 세미콜론으로 나타낸다고 해서 브라우저가 용어에 대한 정의라고 이해하지 않는다. 그렇기 때문에 브라우저가 이해할 수 있도록 아래의 태그를 사용하여 용어에 대한 정의를 하고 있음을 나타내는 것이다.

 

 

 

---

dl

• == description list
• 정의 목록 태그로, 용어를 사전적으로 정의하거나 설명할 때, 혹은 key-value 형태로 정보를 제공할 때 사용한다.
• <dl>의 직계자식요소로는 <dt>와 <dd> 그리고 <div>만 올 수 있다.

 

 

 

---

dt

• == description term
• 용어 태그로, 정의 혹은 설명 목록의 정의하고자 하는 용어, 혹은 key-value에서 key값을 나타낸다.
• 보통 <dt> 요소의 뒤에 용어를 정의하는 <dd> 요소가 오지만, 여러 개의 <dt> 요소를 연속으로 배치하고 <dd> 요소로 앞의 모든 <dt> 요소를 서술할 수도 있다.

 

 

 

---

dd

• == description data
• 앞선 용어 <dt>에 대한 정의나 설명, 혹은 key-value에서 value 값을 제공한다.
• <dt>가 여러 개인데 <dd>가 하나만 있어서는 안된다.
• <dt>나 <dd>가 각자 하나씩만 (key-value 매칭 없이) 있어서는 안된다.

 

 

 

---

dfn

• 현재 맥락이나 문장에서 정의하고 있는 용어를 나타낸다.
• <dfn> 태그는 <dl>의 직계자식 요소가 될 수 없다.
• <dfn> 요소 안의 텍스트는 브라우저에서 자동으로 기울임꼴 표시된다.
• 약어에 대한 구체적인 설명을 나타낼 수 있다.

 

 

 

---

[참고 자료]

https://developer.mozilla.org/ko/docs/Web/HTML/Element/dl

<dl> - HTML: Hypertext Markup Language | MDN

https://developer.mozilla.org/ko/docs/Web/HTML/Element/dt

<dt> - HTML: Hypertext Markup Language | MDN

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd

<dd>: The Description Details element - HTML: HyperText Markup Language | MDN

https://edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4

구름HOME