W3docs
ru
Войти

HTML тег <dfn>

Тег HTML <dfn> отмечает определяющий экземпляр термина. Отличия от <i>/<em>, примеры с title, <abbr> и id.

Тег HTML <dfn> отмечает определяющий экземпляр термина — место в тексте, где этот термин вводится и объясняется впервые. По умолчанию браузеры отображают его содержимое курсивом, но суть тега — в смысле, а не во внешнем виде: он сообщает браузеру, поисковым системам и вспомогательным технологиям «именно здесь определяется это слово».

Зачем использовать <dfn> вместо <i> или <em>?

Может возникнуть соблазн использовать <i> или <em> для выделения термина курсивом, однако эти теги не несут никакой информации о значении текста:

  • <i> — исключительно стилистический тег: курсив без какой-либо семантики.
  • <em> обозначает смысловое ударение (изменение интонации в речи), а не определение.
  • <dfn> является семантическим и машиночитаемым: он явно идентифицирует определяемый термин. Программы чтения с экрана могут объявлять его как определение, а инструменты — формировать на его основе глоссарии.

Поэтому если курсив используется потому, что термин определяется впервые, используйте <dfn>. Если нужен просто курсив или акцент — используйте <i> или <em>.

Синтаксис

Тег <dfn> является парным — содержимое записывается между открывающим <dfn> и закрывающим </dfn> тегами.

Окружающий тег <p>, пара <dt>/<dd> или тег <section> выступает контекстом определения для термина: термин, определяемый с помощью <dfn>, должен быть пояснён в том же блоке.

Базовый пример HTML-тега <dfn>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p><dfn>HTML</dfn> (HyperText Markup Language) — the standardized markup language for documents on the World Wide Web. Most web pages contain a description of the markup in the HTML language.</p>
  </body>
</html>
Попробуйте сами »

dfn example

Как определяется определяемый термин

Браузер решает, какое слово определяет <dfn>, по следующим правилам — в порядке приоритета:

  • Если у <dfn> есть атрибут title, то именно его значение является определяемым термином. Видимый текст при этом может быть аббревиатурой (часто с использованием <abbr>).
  • Если <dfn> содержит ровно один дочерний элемент — <abbr> с атрибутом title — и не имеет другого текстового содержимого, то в качестве определяемого термина используется title элемента <abbr>.
  • В остальных случаях определяемым термином является видимое текстовое содержимое <dfn>.

Пример с атрибутом title

Здесь значение title считается полным определяемым термином, а видимый текст остаётся кратким:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Mouse over to see the definition.</p>
    <dfn title="HyperText Markup Language">HTML</dfn>
  </body>
</html>
Попробуйте сами »
Внимание

Всплывающая подсказка title отображается только при наведении мыши, поэтому она недоступна для пользователей клавиатуры и сенсорных устройств. Никогда не помещайте важную информацию только в title — дополняйте термин видимым пояснительным текстом или используйте <abbr>, чтобы расшифровка была доступна семантически.

Пример с тегом <abbr>

Сочетание <dfn> и <abbr> — распространённый и доступный паттерн: <dfn> отмечает определяющий экземпляр, а <abbr> передаёт полную расшифровку через атрибут title.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Mouse over to see the definition.</p>
    <dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>
  </body>
</html>
Попробуйте сами »

Ссылка на определение через id

Если добавить атрибут id к <dfn>, можно ссылаться на него из любого места страницы с помощью элемента <a>, используя фрагмент (#). Это позволяет читателям напрямую переходить к месту определения термина:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>
      <dfn id="ajax-def">AJAX</dfn> is a technique for updating parts of a
      web page without reloading the whole page.
    </p>

    <p>Later on, we mention <a href="#ajax-def">AJAX</a> again — click the
    link to jump back to its definition.</p>
  </body>
</html>

Атрибуты

АтрибутЗначениеОписание
titletextПредоставляет полное определение или расшифровку термина. При наличии переопределяет термин по умолчанию и отображается как всплывающая подсказка при наведении.

Тег <dfn> также поддерживает Глобальные атрибуты и Атрибуты событий.

Как стилизовать HTML-тег <dfn>

dfn {
  color: #0056b3;
  font-weight: bold;
}

Практика

Практика
Что отмечает HTML-тег <dfn> в документе?
Что отмечает HTML-тег <dfn> в документе?
Was this page helpful?