프로그래밍 공부 일기

2020년 8월 20일 Progate Lv.226

각 태그의 의미

조금 전까지는 정의리스트로서의 역할을 가지고 있었다.
dl(definition list): 정의 리스트
　dt(definition term): 정의할 단어
　dd(definition description): 정의 설명

<dl>
  <dt>バスケットボール</dt>
  <dd>アメリカ発祥のスポーツ</dd>
</dl>

실행 결과


HTML5에서는 설명 리스트로서의 의미로 바뀌어 용도가 퍼졌다.
dl(definition list): 설명 리스트
　dt(definition term): 설명하는 단어
　dd(definition/description):정의문/설명문

<dl>
  <dt>バスケットボール</dt>
  <dd>アメリカ発祥のスポーツ</dd>
</dl>

실행 결과

사용법

사용법은 먼저 전체에 dl 를 둘러싸고 dt 에 설명하고 싶은 것을 쓰고 dd 에 그것에 대한 설명을 쓴다. dl안에는 dt와 dd는 몇개 써도 괜찮다.

사용법(html 파일)

<dl>
  <dt>説明したいこと</dt>
  <dd>それに関する説明</dd>
  <dd>それに関する説明2</dd>

  <dt>説明したいこと2</dt>
  <dd>それ(2)に関する説明</dd>
</dl>

사전 의미를 강조하는 방법

HTML5에서는 정의 리스트와 설명 리스트의 2개의 역할이 있다. 검색 엔진은 각각 동일한 태그이므로 내용이 정의 목록인지 설명 목록인지 알 수 없습니다.
정의 목록으로서 사전적인 의미를 강조하기 위해서는 dfn 태그를 사용한다.

<dl>
  <dt><dfn>バスケットボール<dfn></dt>
  <dd>アメリカ発祥のスポーツ</dd>
</dl>

ul 목록과의 구분

단순한 리스트만으로는 ul(ol)을 사용한 리스트로 좋지만, 리스트에 설명이 필요한 경우에 dl를 사용한다.

ul 사용 예

<ul>
  <li>バスケットボール</li>
  <li>サッカー</li>
  <li>相撲</li>
</ul>

dl 사용 예

<dl>
  <dt>バスケットボール</dt>
  <dd>アメリカ発祥のスポーツ</dd>
  <dt>サッカー</dt>
  <dd>イングランド発祥のスポーツ</dd>
  <dt>相撲</dt>
  <dd>日本発祥のスポーツ</dd>
</dl>

참고문헌

라이벌에 차이를 붙이고 싶다! HTML 코더 필견의 dl dt dd 태그의 기초～응용
HTML 설명 리스트 태그【dl・dt・dd】의 사용법을 철저 해설