<dl>
태그의 정의 및 사용법
<dl>
태그는
설명 목록(description list)를 나타내는 태그입니다.
이 태그는 이름(<dt>
요소를 사용하여 표시)과 이름에 대한 설명(<dd>
요소를 사용하여 제공)으로 구성된 그룹의 연관 목록입니다.
여기서 이름은 용어, 정의, 명칭, 주제, 질문 등을 말하며,
이러한 다양한 정보를 설명하는 목록으로 사용됩니다.
사용 용도로서의 예제
다음은 <dl>
태그의 사용 용도로서의 예제입니다.
<dl>
태그를 어떤 용도의 설명 목록으로 사용하는지에 대해 쉽게 이해할 수 있습니다.
"용어"나 "정의"를 설명하는 목록으로 사용
알아두세요!
<dt>
태그 자체는 <dl>
에 사용될 때 그 내용이 정의되는 용어임을 나타내지 않지만, <dfn>
을 사용하여 이를 나타낼 수 있습니다.
"명칭"을 설명하는 목록으로 사용
"주제"를 설명하는 목록으로 사용
"질문"을 설명하는 목록으로 사용
복합적인 설명의 목록으로 사용
구문 구조로서의 예제
다음은 <dl>
태그의 구문 구조로서의 예제입니다.
<dl>
태그를 어떤 구조로 사용하는지에 대해 쉽게 이해할 수 있습니다.
단일 이름과 단일 설명
여러 이름과 단일 설명
단일 이름과 여러 설명
여러 이름과 여러 설명
위 예제들을 결합하여 여러 이름 여러 설명과 연결하는 것도 가능합니다.
이름과 설명을 <div>
태그로 감싸기
명세서에서는 스타일 지정을 돕기 위해 이름(<dt>
요소를 사용하여 표시)과 이름에 대한 설명(<dd>
요소를 사용하여 제공)으로 구성된 그룹을 <div>
태그로 감싸는 것도 좋은 방법이라고 명시하고 있습니다.
명세서에서는 <dl>
태그의 콘텐츠로 사용될 수 있는 요소를 명확히 했습니다.
<dl>
태그의 콘텐츠로 사용될 수 있는 요소
- 하나 이상의
<dt>
요소와 하나 이상의<dd>
요소로 구성한 그룹 0개 이상. 선택적으로<script>
와<template>
을 혼합 가능. - 또는, 하나 이상의
<div>
. 선택적으로<script>
,<template>
혼합 가능.
주의할 점
<dl>
태그는 대화형 마크업에 적합하지 않습니다.
이해를 돕기 위해 퀴즈를 <dl>
태그를 사용하여 마크업하는 예제를 보여드리겠습니다.
퀴즈와 같은 대화형 콘텐츠를 효과적으로 마크업하는 한 가지 방법은 각 질문과 선택지를 적절한 요소로 그룹화하는 것입니다. 보통 퀴즈는 문답 형식으로 구성되어 있으므로 이에 맞게 마크업할 수 있습니다. 아래는 대화형 퀴즈를 <filedset>
과 <legend>
를 사용하여 마크업하는 것을 대안으로 제시하는 예제입니다.
<dl>
태그를 네비게이션에 사용하는 것은 일반적으로 권장되지 않습니다.
아래의 예제와 같이 <dl>
태그를 네비게이션으로 사용하는 것은 일반적으로 잘못된 사용 사례입니다.
그러나 HTML의 유연성 때문에 이렇게 잘못된 방법으로 사용될 수 있습니다.
위의 예제에서는 <dl>
태그를 사용하여 네비게이션 메뉴를 표현하고 있습니다.
그러나 이것은 의미적으로 부적절하며, 잠재적으로 혼동을 야기할 수 있습니다. 일반적으로 네비게이션 메뉴는 목록(<ul>
) 요소를 사용하여 마크업하는 것이 좋습니다.
위 코드에서는 <nav>
태그를 사용하여 네비게이션 메뉴를 감싸고, 각 메뉴 항목은 <ul>
과 <li>
요소를 사용하여 나열되었습니다. 이제 이렇게 수정된 코드는 목록으로 표현된 네비게이션을 나타내고 있으며, 시맨틱하고 구조적으로 더 나은 표현이 됩니다.
브라우저 호환성
태그 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
<dl>
|
1 | 12 | 1 | 4 |
<dt>
|
1 | 12 | 1 | 4 |
<dd>
|
1 | 12 | 1 | 4 |
명세서
명세서 사양 | |
---|---|
<dl>
|
HTML Standard #the-dl-element |
<dt>
|
HTML Standard #the-dt-element |
<dd>
|
HTML Standard #the-dd-element |