HTML <dfn> 태그 – 올바른 이해와 사용 방법

`<dfn>` 태그의 정의 및 사용법

<dfn> 태그는
현재 맥락이나 문장에서 정의(defining)하고 있는 용어를 나타내는 태그입니다.

<dfn> 태그는 용어의 정의 인스턴스를 나타냅니다.
다시 말해, 어떤 용어가 특정 문서에서 정의되거나 설명되는 부분을 표시하는 역할을 합니다. 이 태그는 주로 용어를 강조하고 해당 용어의 의미를 설명하는 데 사용됩니다.

HTML

<p>
  <dfn>HTML</dfn>은
  HyperText Markup Language의 약자로,
  웹 페이지를 구조화하고 내용을 표시하는 데 사용되는 언어입니다.
</p>

위의 예제에서 <dfn> 태그 내의 "HTML"은 용어로서 강조되며, 이에 대한 정의가 제공됩니다. <dfn> 태그는 HTML 문서에서 용어의 정의를 나타내기 위해 사용되는 태그이며, 시각적 스타일링보다는 의미론적인 목적으로 사용됩니다.

주의할 점

<dfn> 태그를 사용할 때 주의해야 할 중요한 포인트는 다음과 같습니다.

부모 요소

<dfn> 태그의 가장 가까운 상위 부모 요소는 해당 용어의 정의를 포함해야 합니다.
다시 말해, 용어의 정의를 설명하는 부분은 <dfn> 태그의 부모 요소 내부에 위치해야 합니다.

정의 내용

<dfn> 태그는 용어를 강조하는 역할을 하므로, 해당 용어의 정의를 포함하는 구문이나 단락 등이 <dfn> 태그의 부모 요소에 있어야 합니다.

예를 들어, 다음과 같은 HTML 코드를 생각해보겠습니다.

HTML

<p>
  <dfn>HTML</dfn>은 HyperText Markup Language의 약자로, 웹 페이지를 구조화하고 내용을 표시하는 데 사용되는 언어입니다.
</p>

위의 예제에서 <dfn> 태그는 "HTML"이라는 용어를 강조하며, 해당 용어의 정의가 부모인 <p> 요소 내부에 포함됩니다. 이렇게 함으로써 웹 페이지의 사용자는 해당 용어가 무엇을 의미하는지를 빠르게 이해하고, 관련 정보를 찾아볼 수 있게 됩니다.

정의하고 있는 용어 지정하기

<dfn> 태그에서 정의하고 있는 내용은 다음의 규칙을 따라 판별합니다.

`title` 속성 사용

HTML title 속성

이 경우, <dfn> 태그의 title 속성 값인 "Hypertext Markup Language"이 용어 "HTML"의 정의를 나타냅니다.

주의하세요!
<dfn> 태그의 부모나 조상 요소에 있는 title 속성이 <dfn> 태그에 영향을 주지 않습니다.
즉, <dfn> 태그에 직접적으로 title 속성을 정의할 때만 해당 title 속성이 <dfn> 태그의 정의를 나타내게 됩니다.