<dfn> 태그는
현재 맥락이나 문장에서 정의하고 있는 용어를 나타내는 태그입니다.
위의 예제에서 <dfn> 태그 내의 "HTML"은 용어로서 강조되며, 이에 대한 정의가 제공됩니다. <dfn> 태그는 HTML 문서에서 용어의 정의를 나타내기 위해 사용되는 태그이며, 시각적 스타일링보다는 의미론적인 목적으로 사용됩니다.
<dfn> 태그의 정의 및 사용법
<dfn> 태그는 용어의 정의 인스턴스를 나타냅니다.
다시 말해, 어떤 용어가 특정 문서에서 정의되거나 설명되는 부분을 표시하는 역할을 합니다. 이 태그는 주로 용어를 강조하고 해당 용어의 의미를 설명하는 데 사용됩니다.
<dfn> 태그 사용 시 주의사항
<dfn> 태그를 사용할 때 주의해야 할 중요한 포인트는 다음과 같습니다.
부모 요소
<dfn> 태그의 가장 가까운 상위 부모 요소는 해당 용어의 정의를 포함해야 합니다. 다시 말해, 용어의 정의를 설명하는 부분은 <dfn> 태그의 부모 요소 내부에 위치해야 합니다.
정의 내용
<dfn> 태그는 용어를 강조하는 역할을 하므로, 해당 용어의 정의를 포함하는 구문이나 단락 등이 <dfn> 태그의 부모 요소에 있어야 합니다.
예를 들어, 다음과 같은 HTML 코드를 생각해보겠습니다.
위의 예제에서 <dfn> 태그는 "HTML"이라는 용어를 강조하며, 해당 용어의 정의가 부모인 <p> 요소 내부에 포함됩니다.
이렇게 함으로써 웹 페이지의 사용자는 해당 용어가 무엇을 의미하는지를 빠르게 이해하고, 관련 정보를 찾아볼 수 있게 됩니다.
정의하고 있는 용어 지정하기
<dfn> 태그에서 정의하고 있는 내용은 다음의 규칙을 따라 판별합니다.
title 속성 사용
이 경우, <dfn> 태그의 title 속성 값인 "Hypertext Markup Language"이 용어 "HTML"의 정의를 나타냅니다.
주의하세요!
<dfn> 태그의 부모나 조상 요소에 있는 title 속성이 <dfn> 태그에 영향을 주지 않습니다. 즉, <dfn> 태그에 직접적으로 title 속성을 정의할 때만 해당 title 속성이 <dfn> 태그의 정의를 나타내게 됩니다.
<abbr> 태그 사용
이 경우,
<dfn> 태그 내부에 있는 <abbr> 태그의 title 속성 값인 "Cascading Style Sheets"이 용어 "CSS"의 정의를 나타냅니다.
하위 텍스트 콘텐츠 사용
이 경우, <dfn> 태그 내부의 텍스트 "browser"가 용어 "browser"의 정의를 나타냅니다.
이러한 예제들은 <dfn> 태그의 사용 방법과 내부 내용에 따라 용어의 정의가 어떻게 결정되는지 보여주고 있습니다. <dfn> 태그는 이렇게 용어를 명확하게 정의하여 문맥을 개선하고, 사용자가 문서 내용을 이해하는 데 도움을 줄 수 있습니다.
브라우저 호환성
| 태그 |
Chrome
|
Edge
|
Firefox
|
Safari
|
|---|---|---|---|---|
<dfn>
|
15 | 12 | 1 | 6 |
명세서
| 명세서 사양 | |
|---|---|
<dfn>
|
HTML Standard #the-dfn-element |