(html) - Оформление дефениций и терминов

HTML-тег `<dfn>`

HTML-тег <dfn> (сокращение от definition) используется для обозначения термина в том месте, где дается его определение. Это строчный (inline) семантический элемент, который сообщает браузерам, поисковым роботам и скринридерам, что именно это слово или словосочетание сейчас разъясняется в тексте.
Зачем он нужен?
- Семантика и SEO: Тег помогает поисковикам понимать структуру вашей статьи. Роботы видят, какие термины вы определяете, что улучшает индексацию и может помочь при формировании быстрых ответов (сниппетов) в поисковой выдаче.
- Доступность (Accessibility): Скринридеры для незрячих или слабовидящих людей могут по-особому озвучивать текст, если он обернут в , давая пользователю понять, что вводится новое понятие.
- Стилизация: По умолчанию большинство современных браузеров выделяют текст внутри курсивом. Разумеется, этот внешний вид можно легко изменить с помощью обычного CSS.
Правило.
- Визуализируеться курсивом
- Как правильно использоватьПо правилам спецификации HTML, тег должен применяться только при первом упоминании термина, когда вы его объясняете.
- Ближайший родительский элемент (например, абзац
  ) должен содержать само объяснение.
- Определение термина обычно даётся в том же предложении или в ближайшем контексте (в том же абзаце, в элементе
  и т. п.).
Типовое применение.
- Простой вариант
- В связке с <abbr> для расшифровки аббревиатур.
- В списке определений <dl>.
Примечание
- Не стоит использовать просто ради курсива — для этого есть теги (если нужен именно курсив без семантики) или стили CSS.

Как совместить `<dfn> и <dl>`?

Спецификация HTML рекомендует использовать их вместе, если вы делаете полноценный глоссарий. Тег <dfn> вставляется внутрь <dt>, чтобы окончательно подтвердить: «это точное место, где данный термин определяется на всем сайте».

The paragraph, description list group, or section that is the nearest ancestor of the dfn element must also contain the definition(s) for the term given by the dfn element.
«Элемент <dfn> должен использоваться в полном утверждении определения, где полное описание термина может являться: родительским абзацем... парой тегов <dt> / <dd>...»
HTML Standard

<dl>
  <dt><dfn>Фронтенд</dfn></dt>
  <dd>Разработка клиентской части веб-интерфейса.</dd>
</dl>

Элемент

представляет собой контейнер для списков определения, в то время как тег обозначает определенный отдельный термин. Их можно эффективно использовать вместе. Например, внутри структуры

может инкапсулировать термин, который может включать , чтобы явно отметить его для семантической ясности. Эти два обеспечивают взаимодополняющие функции для организации определений логически.
HTML Tag Объяснение – Определение, использование и семантические преимущества | Lenovo US