Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML 정의 목록에서 용어의 시작을 정의하는 방법 – dt 태그 완벽 가이드

HTML에서 <dt> 태그는 정의 목록(Definition List) 내에서 용어(term)의 시작을 정의하는 데 사용됩니다. 정의 목록은 일반적인 순서 없는 목록이나 순서 있는 목록과 비슷하지만, 각 항목이 용어와 설명(description)이라는 두 개의 요소로 구성된다는 점에서 차이가 있습니다.

정의 목록의 기본 구조

정의 목록은 세 가지 태그로 구성됩니다.

  • <dl>: 정의 목록 전체를 감싸는 컨테이너 태그
  • <dt>: 정의할 용어(definition term)를 나타내는 태그
  • <dd>: 해당 용어에 대한 설명(definition description)을 나타내는 태그

즉, <dl> 태그 안에 <dt>로 용어를 먼저 작성하고, 바로 뒤에 <dd>로 그 용어의 설명을 이어서 작성하는 구조입니다.

예제

아래 코드를 실행하면 <dt> 태그를 사용하여 정의 목록에서 용어의 시작을 정의하는 방법을 직접 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML dt Tag</title>
   </head>
   <body>
      <dl>
         <dt>Definition List</dt>
         <dd>A list of terms and their definitions/descriptions.</dd>
         <dt>JAVA</dt>
         <dd>Tutorial on JAVA Programming Language.</dd>
         <dt>Android</dt>
         <dd>Tutorial on Android Operating System.</dd>
      </dl>
   </body>
</html>

위 예제에서는 'Definition List', 'JAVA', 'Android'라는 세 개의 용어를 <dt> 태그로 정의하고, 각 용어에 대한 설명을 <dd> 태그로 작성했습니다. 브라우저에서 실행하면 용어와 설명이 계층적으로 정렬되어 표시되며, 이러한 구조는 용어집, FAQ, 사전 형태의 콘텐츠를 만들 때 특히 유용합니다.