HTML-тег <dfn>

HTML-тег <dfn> используется для представления определения термина. Он обычно используется при введении нового термина или концепции, помогая сделать документ семантически понятным и доступным.

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

Базовый синтаксис тега HTML <dfn>

Тег <dfn> записывается как: 

<dfn>Term</dfn>

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

Атрибуты HTML-тега <dfn>

  • Глобальные атрибуты: Тег <dfn> поддерживает все глобальные атрибуты, такие как id , class , style и data-* .
  • Атрибуты событий: Тег <dfn> поддерживает все атрибуты событий, такие как onclick , onmouseover и onkeydown .

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

Вот простой пример использования тега <dfn> : 

<!DOCTYPE html>
<html>
    <body>
        <h2>Basic Example</h2>
        <p>The term <dfn>HTML</dfn> stands for HyperText Markup Language.</p>
    </body>
</html>
Базовый пример HTML-тега dfn

Пояснение: В этом примере слово «HTML» отмечено как определяющий экземпляр с тегом <dfn> , что делает его семантически значимым.

Использование HTML-тега <dfn> с атрибутом title

Вы можете добавить дополнительную информацию к определяющему термину, используя атрибут title : 

<!DOCTYPE html>
<html>
    <body>
        <h2>Example with Title Attribute</h2>
        <p>The term <dfn title="A markup language for creating web pages">HTML</dfn> is essential for web development.</p>
    </body>
</html>

Объяснение: Атрибут title предоставляет дополнительный контекст о термине «HTML», который может отображаться в виде подсказки при наведении курсора.

Стилизация тега <dfn> с помощью CSS

Вы можете стилизовать тег <dfn> с помощью CSS, чтобы сделать его визуально отличным: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            dfn {
                font-style: italic;
                color: #007BFF;
            }
        </style>
    </head>
    <body>
        <h2>Styled <dfn> Example</h2>
        <p>The term <dfn>JavaScript</dfn> refers to a popular programming language for the web.</p>
    </body>
</html>
Оформление тега dfn с помощью CSS

Результат: Термин «JavaScript» выделен курсивом и синим цветом, чтобы подчеркнуть его как определяющий пример.

Практическое применение тега <dfn>

  • Глоссарии: используйте тег <dfn> для определения терминов в глоссариях или документации.
  • Техническое письмо: выделяйте ключевые термины в статьях или учебных пособиях для лучшей читаемости и семантической ясности.
  • Доступность: Помогите вспомогательным технологиям распознать и подчеркнуть определяющие примеры терминов.

Вложенный пример: использование <dfn> с тегом <abbr>

Вы можете объединить тег <dfn> с тегом <abbr> для определения сокращений: 

<!DOCTYPE html>
<html>
    <body>
        <h2>Example with Abbreviation</h2>
        <p>The term <dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> refers to a language used for styling web pages.</p>
    </body>
</html>
Вложенный пример: использование dfn с тегом abbr

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