Тег dfn (от английского definition, «определение») отмечает термин в том месте, где его определяют: вводят и тут же объясняют. Термин - слово или словосочетание с точным значением, которое в тексте нужно объяснить, например «вьюпорт» или «брейкпоинт». Тег парный, закрывающий обязателен. Собственных атрибутов у него нет.
Какое упоминание слова отмечают тегом dfn, где в тексте записать само определение, что считается термином, если у тега есть title, как сослаться на определение через id и как собрать из таких тегов словарь на JS, - обо всём этом ниже.
<p><dfn>Вьюпорт</dfn> - видимая часть
страницы в окне браузера.</p>В этой статье
- Тег dfn в HTML: что это и какое упоминание термина отмечать
- Определение рядом с тегом dfn: абзац, dt и dd, section
- Атрибут title в теге dfn: что считается термином
- Тег dfn с id: ссылка на определение термина
- Тег dfn и словарь терминов: что можно собрать скриптом
- Стили тега dfn: курсив по умолчанию и как его изменить
- Тег dfn или i, em, strong, abbr, cite: как выбрать
- Частые ошибки с тегом dfn
Тег dfn в HTML: что это и какое упоминание термина отмечать
Термин определяют один раз: там, где он впервые появляется и сразу объясняется. Именно это упоминание оборачивают в dfn. Повторы термина дальше по тексту остаются обычными словами. Тег означает не «здесь стоит термин», а «здесь термин определяется». Так его описывает и стандарт WHATWG: как место, где термин определяется (по-английски defining instance). Есть и справка MDN.
<p><dfn>Брейкпоинт</dfn> - ширина окна,
при которой меняется вёрстка.</p>
<p>Задайте брейкпоинт в условии
для стилей.</p>В примере слово «брейкпоинт» отмечено тегом только в первом абзаце, где его объясняют. Во втором абзаце оно уже знакомо читателю, и тег не нужен. Если слово нужно только выделить, а объяснять его не требуется, подойдёт другой тег: сравнение с другими тегами ниже.
Браузер выводит dfn курсивом и больше ничего не добавляет: нет ни подчёркивания, ни подсказки, ни перехода. Смысл тега в разметке. Программа, которая читает страницу, может найти в ней все определения, а читатель видит выделенное слово в тот момент, когда его объясняют.
Определение рядом с тегом dfn: абзац, dt и dd, section
Стандарт требует, чтобы объяснение термина находилось рядом с dfn: в том же абзаце, в той же паре dt и dd или в том же разделе section. Из этих трёх предков берётся ближайший, и он считается областью определения. Браузер правило не проверяет и выводит разметку одинаково в любом случае. Но если объяснение оказалось в другом абзаце, программа, которая ищет определения, не найдёт его рядом с термином.
Самая простая область - абзац. Объяснение может стоять и после термина, и до него, важно только, чтобы оно было внутри области.
<p><dfn>Вьюпорт</dfn> - видимая часть
страницы в окне браузера.</p>В списке определений термин записывают в dt, а объяснение в следующем dd. Областью считается пара из них: по стандарту это группа списка определений.
<dl>
<dt><dfn>Вьюпорт</dfn></dt>
<dd>Видимая часть страницы в окне.</dd>
<dt><dfn>Скролл</dfn></dt>
<dd>Прокрутка страницы.</dd>
</dl>Если термин - заголовок раздела, областью считается весь section вместе с абзацами под заголовком.
<section>
<h3><dfn>Вьюпорт</dfn></h3>
<p>Видимая часть страницы в окне.</p>
</section>Пример: где стандарт ждёт определение
Кнопки переключают запись. Кадр сам находит ближайший предок термина, рисует вокруг него штриховую рамку и проверяет, попало ли объяснение внутрь.
Атрибут title в теге dfn: что считается термином
По умолчанию термином считается текст внутри dfn. Стандарт задаёт три способа и проверяет их по порядку. Сначала смотрят на атрибут title самого dfn. Потом на title вложенного abbr, но только когда этот abbr единственный внутри, а своего текста у dfn нет. Если ничего не подошло, термином считается весь текст внутри.
<dfn>Скролл</dfn>
<dfn title="Document Object Model">DOM</dfn>
<dfn><abbr title="Document Object Model">DOM</abbr></dfn>Первая запись - текст, вторая - title у самого dfn, третья - title у abbr. Про аббревиатуры и расшифровку в title подробно написано на странице про abbr, в разделе Тег abbr и dfn: как записать определение аббревиатуры.
В title у dfn записывают только сам термин, без объяснения: стандарт требует, чтобы там было только определяемое слово. Объяснение остаётся в тексте рядом. Значение title читатель увидит лишь при наведении мыши, на телефоне подсказки нет. Поэтому запись через title нужна не читателю, а программам, которые читают DOM и собирают термины.
Пример: что программа сочтёт термином
Четыре записи. Выберите ответ, и кадр покажет, что даёт правило стандарта: он проверяет запись тем же порядком, что описан выше.
Тег dfn с id: ссылка на определение термина
Чтобы на определение можно было сослаться, dfn получает атрибут id, а в других местах страницы записывают ссылки a с адресом вида #id. Читатель, который встретил незнакомое слово, нажимает на него и попадает к объяснению. По стандарту такая ссылка помечает ещё одно использование термина, определённого этим dfn.
<p><dfn id="viewport">Вьюпорт</dfn> - видимая
часть страницы в окне браузера.</p>
<p>На телефоне <a href="#viewport">вьюпорт</a>
уже, чем на компьютере.</p>Значение id пишут латиницей, без пробелов, и оно должно быть уникальным на странице. Если два элемента получили один id, ссылка приведёт к первому из них. Ссылку записывают там, где читателю нужна подсказка, а не у каждого упоминания.
Когда читатель переходит по ссылке, у определения срабатывает псевдокласс :target. Им можно подсветить определение, чтобы его было легко найти на странице.
dfn:target {
background: #fff2c9;
}Пример: переход к определению
Три записи. Нажмите на слово «вьюпорт» во втором абзаце: кадр проверит, есть ли на странице элемент с таким id, и покажет результат.
Тег dfn и словарь терминов: что можно собрать скриптом
Определения, отмеченные dfn, можно собрать программой. Скрипт находит все dfn, определяет термин по правилу из предыдущего раздела и складывает термины в список. Браузер словарь сам не строит, но разметка позволяет сделать это за несколько строк JS.
const terms = [...document.querySelectorAll('dfn')]
.map(d => d.title || d.textContent);Этот короткий вариант берёт title у dfn или его текст, а вложенный abbr не проверяет. Полное правило из стандарта есть в примере ниже.
Скрипт находит только слова, отмеченные тегом dfn. Слово, которое просто выделено курсивом, в словарь не попадёт: для программы курсив ничего не означает.
Пример: словарь из разметки
Кнопки меняют запись третьего термина. Кнопка «Собрать словарь» запускает скрипт, который читает разметку выше и строит список терминов по правилу стандарта.
Стили тега dfn: курсив по умолчанию и как его изменить
В Chrome у dfn по умолчанию font-style: italic. Вес и цвет остаются такими же, как у окружающего текста, подчёркивания нет. Даже если у dfn есть title, никакого значка подсказки не появляется: этим он отличается от abbr, у которого title даёт пунктир.
Внутри курсивного окружения, например в em или i, dfn остаётся курсивным и не становится прямым. В заголовке он выводится жирным курсивом, в ссылке берёт цвет ссылки. Свойство font-style: normal убирает курсив.
Курсив у dfn совпадает с курсивом у i и em, поэтому определение термина трудно отличить от иностранного слова или акцента. Если это важно, у dfn задают свой вид в CSS.
dfn {
font-style: normal;
font-weight: 700;
color: #7C6CF6;
}Такой dfn выглядит как отдельный вид выделения, и читатель узнаёт в нём место, где термин определяется. Подсветку при переходе по ссылке через :target разобрали в разделе про id.
Тег dfn или i, em, strong, abbr, cite: как выбрать
В браузере i, em и dfn выглядят одинаково: все три выводятся курсивом. Различие в том, что сообщает тег. Ещё в таблице strong, abbr и cite: их часто путают с определением термина.
| Тег | Что он сообщает | Когда выбрать |
|---|---|---|
dfn | Здесь термин определяется | Первое упоминание, объяснение в той же области |
i | Термин, иностранное слово или мысль, выделенные другим голосом | Термин используется, но не определяется здесь; иностранное слово |
em | Слово читается с нажимом, от этого меняется смысл фразы | Нужен интонационный акцент |
strong | Важность, предупреждение | Читатель не должен пропустить |
abbr | Сокращение, расшифровка в title | Аббревиатура; при её определении записывается внутри dfn |
cite | Название произведения | Книга, статья, фильм; это не термин |
Частые ошибки с тегом dfn
Ошибки с этим тегом связаны с тем, что его используют вместо курсива, а не для определения термина.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
dfn на каждом упоминании: <dfn>вьюпорт</dfn> и в первом, и в пятом абзаце | Программа насчитает несколько определений одного слова, а читатель получит курсив без объяснения | Оставить dfn на первом упоминании с объяснением, повторы записать обычным текстом |
Объяснение в другом абзаце: <p><dfn>Вьюпорт</dfn> важен.</p>, а смысл слова написан в следующем <p> | Объяснение вне области определения, программа не найдёт его рядом с термином | Записать объяснение в тот же абзац, пару dt и dd или раздел |
Объяснение в title: <dfn title="видимая часть страницы">Вьюпорт</dfn> | Термином считается значение title, и программа запишет «видимая часть страницы» вместо слова «вьюпорт» | Убрать title или записать в нём только термин; объяснение оставить в тексте |
Вложенный dfn: <dfn>вьюпорт <dfn>окна</dfn></dfn> | Стандарт это запрещает; браузер ошибку не покажет, но программа не поймёт, какой из двух терминов определяется | Один dfn на один термин |
dfn для названия книги: <dfn>Мастер и Маргарита</dfn> | Тег сообщает, что здесь определяется термин, а это название произведения | cite |
dfn без объяснения: <dfn>Брейкпоинт</dfn> используется в стилях. | Тег обещает объяснение, а рядом его нет | Добавить объяснение в эту же область или взять i |
Пустой dfn с id: <dfn id="viewport"></dfn> | Термина нет, программа получит пустую строку, а ссылка приведёт в пустое место | Записать термин внутрь тега |
Ссылка без id: <a href="#viewport">вьюпорт</a>, а у dfn атрибута нет | Переход не выполняется, страница остаётся на месте | Добавить dfn атрибут id="viewport" |
Ждут подчёркивание и подсказку, как у abbr | dfn даёт только курсив, title подчёркивания не создаёт | Для расшифровки сокращения записать abbr с title внутри dfn |
