Description List Tag

용어 정의 및 Key-Value로 정보를 제공하는 태그

HTML의 Description List Tag는 <dl>를 사용하여 설명 목록을 나타낸다.

크게 용어를 정의하거나 Key-Value의 형태로 정보를 제공할 때 사용하는 태그다.

<dl>태그는 <dt>로 표기한 용어와 <dd> 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성한다. 주로 용어사전의 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용한다.

<dl> 
  <!-- <dt>태그 : key-value에서 key값 -->
  <dt>계단</dt>
  <!-- <dd>태그 : <dt>태그에 대한 설명 -->
  <dd>
    높이가 다른 곳으로 걸어서 움직일 때, 밟고 오르내릴 수 있도록 턱을 지어 만든 설비
  </dd>
  <dd>
    일을 하는 데 밟아야 할 순서
  </dd>
</dl>

위 코드를 실행하면 아래와 같은 결과가 출력된다.

사전적으로 의미를 구체화하고 싶으면 <dt>태그안에 <dfn>태그를 사용한다.

<dl>
  <dt>
    <dfn>계단 </dfn>
  </dt>
  <dd>
    높이가 다른 곳으로 걸어서 움직일 때, 밟고 오르내릴 수 있도록 턱을 지어 만든 설비
  </dd>
  <dd>
    일을 하는 데 밟아야 할 순서
  </dd>
</dl>

Quotations Tag

인용문을 표현하는 태그

HTML의 Quotations Tag들은 해당 요소를 인용문으로 표현할 때 사용하는 태그다.

인용문의 길이에 따라 <blockquote>, <q>,태그를 사용할 수 있으며, 문단이나 내용 전체가 하나의 인용문일때는 <blockquote>, 문장내 인용문을 사용할때 사용때는 <q>를 사용한다.

<q>는 <blockquote>와 달리 사용시 해당 문장이 " "로 나타난다.

  <!-- <blockquote>태그안에 cite속성을 사용하여 출처를 밝히면 더 완벽한 인용문 코드 -->
<blockquote cite="https://brunch.co.kr/@brunchflgu/72">
	역사적 성공의 반은 죽을지도 모른다는 위기에서 비롯되었고,<br>
	역사적 실패의 반은 찬란했던 시절에 대한 기억에서 시작되었다.<br><br>
            
	<!-- 문장으로 출처를 밝히고 싶을 때 <cite>태그 사용 -->
  <cite>-아놀드 토인비</cite>
</blockquote>

<p>          
	<q>훌륭함과 널리 알려진 정도에 대한 기준은 사람마다 다 제각각이고 주관적이기에</q><br>
	섣불리 어떤 말을 무조건 명언이라고 단정하기는 어렵다. 2번의 의미로 <br>
	쓴다면 훌륭한 말은 아니고, 널리 대중들에게 알려진 유명한 말이라고 할 수 있다.
</p>

위 코드를 실행하면 아래와 같은 결과가 출력된다.

참고 자료

<dl> - HTML: Hypertext Markup Language - MDN Web Docs
<blockquote> - HTML: Hypertext Markup Language - MDN Web Docs
<q> - HTML: Hypertext Markup Language - MDN Web Docs