정의 및 사용 방법

<dfn> 태그는 콘텐츠 내에서 정의(defining)하고 있는 용어임을 나타냅니다.

이 태그는 정의에 대한 용어임을 명확히 하기 위한 것으로, 용어와 정의가 함께 제시된 문장에서만 사용됩니다.

기본 예제

HTML 
<p>
  <dfn>HTML</dfn>은
  HyperText Markup Language의 약자로,
  웹 페이지를 구조화하고 내용을 표시하는 데 사용되는 언어입니다.
</p>
브라우저에서 실제 표시된 모습

위 예제에서 <dfn> 태그는 “HTML”이라는 용어가 문장 내에서 정의되고 있음을 나타냅니다.
이 태그는 정의와 함께 등장하는 용어를 명확히 표시하기 위한 의미론적 태그이며, 시각적인 강조보다는 정보 구조와 의미론적 해석의 정확성을 높이기 위한 용도로 사용됩니다.

주의할 점

<dfn> 태그의 가장 가까운 상위 부모 요소는 해당 용어의 정의를 포함해야 합니다. 예를 들어, 문단(<p>), 설명 목록(<dl>, <dt>, <dd>), 일반적인 섹션(<section>) 등에서 용어와 정의가 함께 제시되어 있어야 합니다.

문단에서 <dfn> 태그의 사용

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

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

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

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

설명 목록에서 <dfn> 태그의 사용

<dfn> 태그는 설명 목록(<dl>)에서도 용어와 그 정의를 구조화하는 데 사용할 수 있습니다. <dt> 태그 안에 정의할 용어를 <dfn>으로 감싸고, <dd> 태그에 그 용어에 대한 정의를 작성하면, 정보를 명확하게 표현할 수 있습니다.

HTML 
<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>

위 예제에서 <dfn> 태그는 각각 "HTML"과 "CSS"라는 용어가 정의되고 있음을 나타냅니다. 이 용어들은 <dt> 태그 내에서 <dfn>으로 감싸져 있고, 정의는 각각의 <dd> 태그 안에 위치해 있습니다. 이처럼 설명 목록 내에서 <dfn>을 사용하면 용어와 그 정의의 관계를 구조화할 수 있으며, 문서의 의미론적 명확성을 높이는 데 도움이 됩니다.

일반적인 섹션(<section>) 등에서 <dfn> 태그의 사용

<dfn> 태그는 일반적인 콘텐츠 섹션인 <section> 태그 내에서도 사용할 수 있습니다. 이 경우, 섹션 전체가 해당 용어의 정의 맥락을 형성하며, <dfn> 태그는 그 안에서 정의되는 용어를 명확히 표시하는 데 사용됩니다.

HTML 
<section>
    <h2>ARIA</h2>
    <p>
        <dfn>ARIA</dfn>는 Accessible Rich Internet Applications의 약자로,
        웹 콘텐츠를 보조 기술과 함께 사용할 수 있도록 도와주는 접근성 기술입니다.
    </p>
</section>

이 예제에서 <section> 태그는 "ARIA"라는 용어를 중심 주제로 삼고 있으며, 해당 용어는 섹션 제목과 본문에서 함께 사용되고 있습니다. <dfn> 태그는 "ARIA"라는 용어가 정의되고 있음을 명확히 나타내며, 정의 내용은 동일한 섹션 내부에 포함되어 있어 의미론적으로 올바른 사용 방식입니다.

title 속성의 사용

<dfn> 태그에 title 속성 사용되면 해당 속성이 정확한 용어 정의의 대상이 됩니다.

HTML 
<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"의 정의를 나타냅니다.

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

<abbr> 태그 사용

<dfn> 태그 내에 <abbr> 태그를 사용하고, 이 <abbr> 태그에 title 속성 사용되면 해당 속성이 정확한 용어 정의의 대상이 됩니다.

HTML 
<p>
    The <dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> is used
    for styling web documents.
</p>

코드 부연설명
<abbr> 태그는 약어나 줄임말을 나타내는 태그입니다. 주로 title 속성으로 약어나 줄임말에 대한 설명 혹은 확장 형태를 사람이 읽을 수 있는 형태를 값으로 가집니다.

이 경우, <dfn> 태그 내부에 있는 <abbr> 태그의 title 속성 값인 "Cascading Style Sheets"이 용어 "CSS"의 정의를 나타냅니다.

이러한 예제들은 <dfn> 태그의 사용 방법과 내부 내용에 따라 용어의 정의가 어떻게 결정되는지 보여주고 있습니다. <dfn> 태그는 이렇게 용어를 명확하게 정의하여 문맥을 개선하고, 사용자가 문서 내용을 이해하는 데 도움을 줄 수 있습니다.

브라우저 호환성

dfn 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<dfn> 15 12 1 6

명세서

dfn 태그의 명세서 사양
명세서 사양
<dfn> HTML Standard
#the-dfn-element

참고문헌

같이 보기