<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>
. Мы рассмотрим их здесь.
Определяемый термин
Определяемый термин устанавливается в соответствии с этими правилами:
- Если
<dfn>
элемент имеетtitle
атрибут, значение атрибутаtitle
считается определяемым термином. Элемент должен по-прежнему иметь текст внутри него, но этот текст может быть аббревиатурой (возможно, с использованием<abbr>
) или другой формой термина. - Если объект
<dfn>
содержит единственный дочерний элемент и не имеет собственного текстового содержимого, а дочерний элемент является<abbr>
элементом с атрибутомtitle
, то строго значениеtitle
<abbr>
элемента является определяемым термином. - В противном случае текстовое содержимое
<dfn>
элемента является определяемым термином. Это показано в примере ниже.
Примечание: Если <dfn>
элемент имеет атрибут title
, он должен содержать определяемый термин и никакой другой текст.
Ссылки на <dfn>
элементы
Если вы включаете атрибут id
в <dfn>
элемент, вы можете ссылаться на него, используя <a>
элементы. Они должны ссылаться на использование термина, чтобы читатель смог быстро перейти к определению термина, если он ещё не знает его, нажав на ссылку термина.
Это показано ниже в примере Ссылки на определения.
Примеры
Давайте рассмотрим несколько примеров различных сценариев использования.
Базовая идентификация термина
В этом примере просто используется <dfn>
элемент для нахождения местоположения термина в определении.
HTML
<p>
<strong>Элемент определения HTML</strong> (<strong
><dfn><dfn></dfn></strong
>) используется для обозначения термина, определяемого в контексте фразы или
предложения.
</p>
Поскольку <dfn>
элемент не имеет title
, текстовое содержимое самого <dfn>
элемента используется в качестве определяемого термина.
Результат
Это выглядит так в вашем браузере:
Ссылки на определения
Чтобы добавить ссылки к определениям, вы создаёте ссылку так же, как и всегда, с <a>
элементом. <p><strong>Элемент определения HTML</strong> (<strong><dfn><dfn></dfn></strong>)
используется для обозначения термина, определяемого в контексте фразы или предложения. </p>
HTML
<p>
<strong>Элемент определения HTML</strong> (<strong
><dfn id="definition-dfn"><dfn></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"><dfn></a></code> для этого проекта.
</p>
Здесь мы видим определение - теперь с атрибутом id
«definition-dfn»
, который может использоваться в качестве цели для ссылки. Позднее создаётся ссылка с использованием <a>
и с href
атрибутом, установленным на «#definition-dfn»
, чтобы установить ссылку обратно на определение.
Результат
Полученный контент выглядит так:
Использование сокращений и определений вместе
В некоторых случаях вы можете использовать сокращение для термина при его определении. Это можно сделать с помощью <dfn>
и <abbr>
элементов вместе, например так:
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