<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>) используется для указания термина, определяемого в контексте фразы или предложения. Элемент<p>, пара<dt>/<dd> или <section> элемент, который является ближайшим предком <dfn> считается определением термина.

Интерактивный пример

Категории контента Потоковый контент, фразовый контент, явный контент.
Допустимый контент Фразовый контент, но ни один <dfn> элемент не должен быть потомком.
Пропуск тега Нет, открывающий и закрывающий теги обязательны.
Допустимые родители Любой элемент, который принимает фразовый контент.
Допустимые ARIA-роли Любые
DOM-интерфейс HTMLElement

Атрибуты

Атрибуты этого элемента включают глобальные атрибуты.

В HTML5 title атрибут имеет особое значение, как указано ниже.

Примечания по использованию

Есть несколько не совсем очевидных аспектов использования элемента <dfn>. Мы рассмотрим их здесь.

Определяемый термин

Определяемый термин устанавливается в соответствии с этими правилами:

  1. Если <dfn> элемент имеет title атрибут, значение атрибута title считается определяемым термином. Элемент должен по-прежнему иметь текст внутри него, но этот текст может быть аббревиатурой (возможно, с использованием<abbr>) или другой формой термина.
  2. Если объект <dfn> содержит единственный дочерний элемент и не имеет собственного текстового содержимого, а дочерний элемент является <abbr> элементом с атрибутом title, то строго значение title <abbr> элемента является определяемым термином.
  3. В противном случае текстовое содержимое <dfn> элемента является определяемым термином. Это показано в примере ниже.

Примечание: Если <dfn> элемент имеет атрибут title, он должен содержать определяемый термин и никакой другой текст.

Ссылки на <dfn> элементы

Если вы включаете атрибут id в <dfn> элемент, вы можете ссылаться на него, используя <a> элементы. Они должны ссылаться на использование термина, чтобы читатель смог быстро перейти к определению термина, если он ещё не знает его, нажав на ссылку термина.

Это показано ниже в примере Ссылки на определения.

Примеры

Давайте рассмотрим несколько примеров различных сценариев использования.

Базовая идентификация термина

В этом примере просто используется <dfn> элемент для нахождения местоположения термина в определении.

HTML

html
<p>
  <strong>Элемент определения HTML</strong> (<strong
    ><dfn>&lt;dfn&gt;</dfn></strong
  >) используется для обозначения термина, определяемого в контексте фразы или
  предложения.
</p>

Поскольку <dfn> элемент не имеет title, текстовое содержимое самого <dfn> элемента используется в качестве определяемого термина.

Результат

Это выглядит так в вашем браузере:

Ссылки на определения

Чтобы добавить ссылки к определениям, вы создаёте ссылку так же, как и всегда, с <a> элементом. <p><strong>Элемент определения HTML</strong> (<strong><dfn>&lt;dfn&gt;</dfn></strong>) используется для обозначения термина, определяемого в контексте фразы или предложения. </p>

HTML

html
<p>
  <strong>Элемент определения HTML</strong> (<strong
    ><dfn id="definition-dfn">&lt;dfn&gt;</dfn></strong
  >) используется для обозначения термина, определяемого в контексте фразы или
  предложения.
</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>
  Из-за всего этого мы решили использовать элемент
  <code><a href="#definition-dfn">&lt;dfn&gt;</a></code> для этого проекта.
</p>

Здесь мы видим определение - теперь с атрибутом id «definition-dfn», который может использоваться в качестве цели для ссылки. Позднее создаётся ссылка с использованием <a> и с hrefатрибутом, установленным на «#definition-dfn», чтобы установить ссылку обратно на определение.

Результат

Полученный контент выглядит так:

Использование сокращений и определений вместе

В некоторых случаях вы можете использовать сокращение для термина при его определении. Это можно сделать с помощью <dfn> и <abbr> элементов вместе, например так:

HTML

html
<p>
  <dfn><abbr title="Hubble Space Telescope">HST</abbr></dfn> является одним из
  самых производительных научных инструментов, когда-либо созданных. Он
  находится на орбите более 20 лет, просматривая небо и отправляя данные и
  фотографии беспрецедентного качества и детализации.
</p>

<p>
  Действительно, HST, возможно,
  <abbr title="Hubble Space Telescope"></abbr> сделал больше для развития науки,
  чем любое другое устройство, когда-либо созданное.
</p>

Обратите внимание на <abbr> элемент, вложенный в <dfn>. Первый устанавливает, что термин является аббревиатурой («HST») и определяет полный термин («Hubble Space Telescope (Космический телескоп „Хаббл")») в своём атрибуте title. Последнее указывает на то, что сокращённый термин представляет собой определяемый термин.

Результат

Вывод приведённого выше кода выглядит следующим образом:

Спецификации

Specification
HTML Standard
# the-dfn-element

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

  • Элементы, связанные со списками определений: <dl><dt><dd>
  • <abbr>