<dfn>: 정의 요소

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

HTML <dfn> 요소는 현재 맥락이나 문장에서 정의하고 있는 용어를 나타냅니다. <dfn>에서 가장 가까운 <p>, <dt>/<dd> 쌍, <section> 조상 요소를 용어 정의로 간주합니다.

시도해보기

콘텐츠 카테고리	플로우 콘텐츠, 구문 콘텐츠, 뚜렷한 콘텐츠.
가능한 콘텐츠	구문 콘텐츠. 단, 다른 `<dfn>` 요소는 불가능.
태그 생략	불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다.
가능한 부모 요소	구문 콘텐츠를 허용하는 모든 요소.
암시적 ARIA 역할	`definition`
가능한 ARIA 역할	모두
DOM 인터페이스	`HTMLElement`

특성

이 요소는 전역 특성만 포함합니다.

사용 일람

<dfn> 요소를 보는 것 만으로는 그다지 명확하지 않은 부분이 있습니다.

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

다음 규칙을 따라 현재 용어가 어느건지 판별합니다.

<dfn> 요소가 title 특성을 가지고 있으면 그 값을 현재 정의 중인 용어로 간주합니다. <dfn>은 여전히 텍스트 콘텐츠를 가지고 있겠지만, 완전한 용어 대신 준말(<abbr>)을 넣을 수도 있고, 다른 대체 형태일 수도 있습니다.
<dfn>이 다른 텍스트는 없이 하나의 자식만 가지는데, 그 자식이 title 특성을 가진<abbr>인 경우, 자식 <abbr>의 title 특성 값을 현재 용어로 간주합니다.
모두 아닌 경우 <dfn>의 텍스트 콘텐츠를 현재 용어로 간주합니다. 아래의 첫 번째 예제에서 확인할 수 있습니다.

참고: <dfn> 요소가 title 특성을 가진 경우, 그 값은 정의 중인 용어여야 하며 다른 텍스트는 들어가선 안됩니다.

`<dfn>` 요소를 가리키는 링크

<dfn> 요소에 id 특성을 지정하면 <a> 요소로 <dfn>을 가리킬 수 있습니다. 사용자가 용어 뜻을 잘 모를 경우, 링크를 클릭해 빠르게 정의를 확인할 수 있습니다. 따라서 링크 콘텐츠는 용어의 사용 예시 등을 담고 있어야 합니다.

정의로 링크 예제에서 확인할 수 있습니다.

예제

다양한 상황의 예제를 살펴보겠습니다.

기본적인 용어 식별

아래 코드는 간단하게 <dfn> 요소를 사용해, 정의 문단 내의 용어를 식별합니다.

HTML

html

<p>
  The <strong>HTML Definition element</strong> (<strong
    ><dfn>&lt;dfn&gt;</dfn></strong
  >) is used to indicate the term being defined within the context of a
  definition phrase or sentence.
</p>

<dfn> 요소에 title이 없으므로 <dfn>의 텍스트 콘텐츠가 현재 정의 중인 용어입니다.

결과

정의로 링크

용어의 정의로 링크하는 건 <a> 요소로 다른 링크를 만드는 방법과 같습니다.

HTML

html

<p>
  The <strong>HTML Definition element</strong> (<strong
    ><dfn id="definition-dfn">&lt;dfn&gt;</dfn></strong
  >) is used to indicate the term being defined within the context of a
  definition phrase or sentence.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece donan, Latine
  voluptatem vocant. Confecta res esset. Duo Reges: constructio interrete.
  Scrupulum, inquam, abeunti;
</p>

<p>
  Negare non possum. Dat enim intervalla et relaxat. Quonam modo? Equidem e Cn.
  Quid de Pythagora? In schola desinis.
</p>

<p>
  Ubi ut eam caperet aut quando? Cur iustitia laudatur? Aperiendum est igitur,
  quid sit voluptas; Quid enim? Non est igitur voluptas bonum. Urgent tamen et
  nihil remittunt. Quid enim possumus hoc agere divinius?
</p>

<p>
  Because of all of that, we decided to use the
  <code><a href="#definition-dfn">&lt;dfn&gt;</a></code> element for this
  project.
</p>

이번에는 id 특성에 "definition-dfn"을 사용한 용어 정의입니다. 코드 뒤쪽에서는 <a> 태그와 href 특성 값 "#definition-dfn"으로, 정의를 가리키는 링크를 생성합니다.

결과

준말과 정의 같이 사용하기

어떤 경우, 용어를 정의할 때 머리글자 등 준말을 사용하고 싶을 때가 있습니다. 그럴 땐 <dfn>과 <abbr> 요소를 조합하면 됩니다.

HTML

html

<p>
  The <dfn><abbr title="Hubble Space Telescope">HST</abbr></dfn> is among the
  most productive scientific instruments ever constructed. It has been in orbit
  for over 20 years, scanning the sky and returning data and photographs of
  unprecedented quality and detail.
</p>

<p>
  Indeed, the <abbr title="Hubble Space Telescope">HST</abbr> has arguably done
  more to advance science than any device ever built.
</p>

<dfn> 요소 안에 배치한 <abbr>을 주목하세요. <abbr>은 준말("HST")과 함께 title 특성으로 전체 용어("Hubble Space Telescope")를 지정합니다. <dfn>은 <abbr>의 준말을 현재 정의하고 있음을 나타냅니다.

결과

명세

Specification
HTML Standard # the-dfn-element

브라우저 호환성

BCD tables only load in the browser

같이 보기

용어 정의 관련 요소: <dl>, <dt>, <dd>
<abbr>