정의 및 사용 방법
<dfn>
태그는 콘텐츠 내에서 정의(defining)하고 있는 용어임을 나타냅니다.
이 태그는 정의에 대한 용어임을 명확히 하기 위한 것으로, 용어와 정의가 함께 제시된 문장에서만 사용됩니다.
기본 예제
<p>
<dfn>HTML</dfn>은
HyperText Markup Language의 약자로,
웹 페이지를 구조화하고 내용을 표시하는 데 사용되는 언어입니다.
</p>
HTML은 HyperText Markup Language의 약자로, 웹 페이지를 구조화하고 내용을 표시하는 데 사용되는 언어입니다.
위 예제에서 <dfn>
태그는 “HTML”이라는 용어가 문장 내에서 정의되고 있음을 나타냅니다.
이 태그는 정의와 함께 등장하는 용어를 명확히 표시하기 위한 의미론적 태그이며, 시각적인 강조보다는 정보 구조와 의미론적 해석의 정확성을 높이기 위한 용도로 사용됩니다.
주의할 점
문단에서 <dfn>
태그의 사용
<dfn>
태그는 정의하는 내용의 용어임을 나타내는 역할을 하므로, 해당 용어의 정의를 포함하는 구문이나 단락 등이 <dfn>
태그의 부모 요소에 있어야 합니다.
예를 들어, 다음과 같은 HTML 코드를 생각해보겠습니다.
<p>
<dfn>HTML</dfn>은 HyperText Markup Language의 약자로, 웹 페이지를 구조화하고 내용을 표시하는 데 사용되는 언어입니다.
</p>
위의 예제에서 <dfn>
태그는 "HTML"이라는 용어를 강조하며, 해당 용어의 정의가 부모인 <p>
태그 내부에 포함됩니다. 이렇게 함으로써 웹 페이지의 사용자는 해당 용어가 무엇을 의미하는지를 빠르게 이해하고, 관련 정보를 찾아볼 수 있게 됩니다.
설명 목록에서 <dfn>
태그의 사용
<p>HTML과 CSS의 설명입니다.</p>
<dl>
<dt><dfn>HTML</dfn></dt>
<dd>
HyperText Markup Language의 약자로,
웹 페이지를 작성하는 데 사용되는
마크업 언어입니다.
</dd>
<dt><dfn>CSS</dfn></dt>
<dd>
Cascading Style Sheets의 약자로,
웹 페이지의 스타일과 레이아웃을 지정하는데 사용되는
스타일시트 언어입니다.
</dd>
</dl>
일반적인 섹션(<section>
) 등에서 <dfn>
태그의 사용
<dfn>
태그는 일반적인 콘텐츠 섹션인 <section>
태그 내에서도 사용할 수 있습니다.
이 경우, 섹션 전체가 해당 용어의 정의 맥락을 형성하며, <dfn>
태그는 그 안에서 정의되는 용어를 명확히 표시하는 데 사용됩니다.
<section>
<h2>ARIA</h2>
<p>
<dfn>ARIA</dfn>는 Accessible Rich Internet Applications의 약자로,
웹 콘텐츠를 보조 기술과 함께 사용할 수 있도록 도와주는 접근성 기술입니다.
</p>
</section>
이 예제에서 <section>
태그는 "ARIA"라는 용어를 중심 주제로 삼고 있으며, 해당 용어는 섹션 제목과 본문에서 함께 사용되고 있습니다. <dfn>
태그는 "ARIA"라는 용어가 정의되고 있음을 명확히 나타내며, 정의 내용은 동일한 섹션 내부에 포함되어 있어 의미론적으로 올바른 사용 방식입니다.
title
속성의 사용
<dfn>
태그에 title
속성 사용되면 해당 속성이 정확한 용어 정의의 대상이 됩니다.
<p>
The <dfn title="Hypertext Markup Language">HTML</dfn> is a standard
markup language used to create web pages.
</p>
코드 부연설명
title
속성은 이 속성이 있는 요소에 대한 지침 또는 설명 등의 참고할 만한 정보를 나타냅니다. 일부 데스트탑 브라우저에서는 툴팁(tooltip)으로 표시합니다.
이 경우, <dfn>
태그의 title
속성 값인 "Hypertext Markup Language"이 용어 "HTML"의 정의를 나타냅니다.
<abbr>
태그 사용
<p>
The <dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> is used
for styling web documents.
</p>
이러한 예제들은 <dfn>
태그의 사용 방법과 내부 내용에 따라 용어의 정의가 어떻게 결정되는지 보여주고 있습니다. <dfn>
태그는 이렇게 용어를 명확하게 정의하여 문맥을 개선하고, 사용자가 문서 내용을 이해하는 데 도움을 줄 수 있습니다.
브라우저 호환성
태그 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
<dfn>
|
15 | 12 | 1 | 6 |
명세서
명세서 사양 | |
---|---|
<dfn>
|
HTML Standard #the-dfn-element |