여러 개 label, div의 불편한 점

• 같은 구조가 반복하는 공간에서 div와 label을 중복으로 사용하면 css를 줄때 헷갈리게 됨
• 이를 해결하고자 dl, dt, dd를 사용하여 제목과 설명이 한 세트가 되도록 구성함
  • 전체 제목 = dt을 같은 스타일을 줄 수 있음

<dl>

• <dl> 요소 : 설명 목록
  • <dt> : 용어
  • <dd> : 용어의 설명
• <dl> = <dt> + <dd>
• 주로 용어사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용

javascript

<p>Cryptids of Cornwall:</p>

<dl>
    <dt>Beast of Bodmin</dt>
    <dd>A large feline inhabiting Bodmin Moor.</dd>

    <dt>Morgawr</dt>
    <dd>A sea serpent.</dd>

    <dt>Owlman</dt>
    <dd>A giant owl-like creature.</dd>
</dl>

css

.output {
    font: 1rem 'Fira Sans', sans-serif;
}

p,
dt {
    font-weight: bold;
}

dl,
dd {
    font-size: .9rem;
}

dd {
    margin-bottom: 1em;
}

예제

하나의 용어와 하나의 정의

<dl>
  <dt>Firefox</dt>
  <dd>
    Mozilla 재단과 수 백명의
    자원봉사자가 개발한 무료
    오픈소스 크로스 플랫폼
    그래픽 웹 브라우저.
  </dd>

  <!-- 다른 용어 및 정의 -->
</dl>

여러 개의 용어와 하나의 정의

<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>
    Mozilla 재단과 수 백명의
    자원봉사자가 개발한 무료
    오픈소스 크로스 플랫폼
    그래픽 웹 브라우저.
  </dd>

  <!-- 다른 용어 및 정의 -->
</dl>

하나의 용어와 여러 개의 정의

<dl>
  <dt>Firefox</dt>
  <dd>
    Mozilla 재단과 수 백명의
    자원봉사자가 개발한 무료
    오픈소스 크로스 플랫폼
    그래픽 웹 브라우저.
  </dd>
  <dd>
    붉은 판다, 레서 판다, 랫서 판다,
    혹은 "Firefox"는 초식성 포유류이다.
    몸 길이는 애완용 고양이보다 약간
    큰 정도인 60cm다.
  </dd>

  <!-- 다른 용어 및 정의 -->
</dl>

여러 개의 용어와 어러 개의 정의

메타데이터

• <dl> : 메타데이터를 키-값 쌍으로 표시할 때 유용

<dl>
  <dt>Name</dt>
  <dd>Godzilla</dd>
  <dt>Born</dt>
  <dd>1952</dd>
  <dt>Birthplace</dt>
  <dd>Japan</dd>
  <dt>Color</dt>
  <dd>Green</dd>
</dl>

• 키-값 구분자를 CSS로 지정하면 편리함

dt:after {
  content: ": ";
}

이름-값 그룹을 <div>로 감싸기

• <dl> 안 각각의 이름-값 그룹을 <div>로 감쌀 수 있음
• 마이크로데이터, 그룹에 전역 특성, 스타일 적용 시 유용함

<dl>
  <div>
    <dt>Name</dt>
    <dd>Godzilla</dd>
  </div>
  <div>
    <dt>Born</dt>
    <dd>1952</dd>
  </div>
  <div>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
  </div>
  <div>
    <dt>Color</dt>
    <dd>Green</dd>
  </div>
</dl>

참고

• 페이지에서 들여쓰기를 하기 위한 목적으로 <dl>, <ul> 요소를 사용하지 않음
• 작동하나 좋지 않은 방법
• 설명 목록의 원래 목적을 흐림

해당 내용은 다음 자료를 참고했습니다.
mdn web docs - <dl>