Атрибут hidden тега <dfn>

Описание

Атрибут hidden скрывает элемент <dfn> и его содержимое от просмотра в браузере. Это булевый атрибут — его наличие (даже без значения) скрывает элемент, а отсутствие делает элемент видимым.

Пример использования:
<dfn>HTML</dfn> - стандартный язык разметки (видимый) <dfn hidden>CSS</dfn> - этот термин и определение скрыты <dfn hidden="hidden">JavaScript</dfn> - также скрытый вариант записи

Особенности работы:

Состояние Как задать Эквивалент в CSS
Скрытый <dfn hidden> или <dfn hidden="hidden"> display: none
Видимый Отсутствие атрибута -

Динамическое управление видимостью:

<dfn id="toggle-term">API</dfn> - интерфейс программирования приложений <button onclick="toggleTerm()">Переключить видимость</button> <script> function toggleTerm() { const term = document.getElementById('toggle-term'); term.hidden = !term.hidden; } </script>

Разница между hidden и CSS display:none:

  • hidden - семантический HTML-атрибут, указывает, что контент неактуален
  • display: none - чисто визуальное скрытие без семантического значения
  • Оба метода полностью удаляют элемент из потока документа

Рекомендации по использованию:

  • Используйте для временного скрытия неактуальных определений
  • Не применяйте для сокрытия важной информации (пользователи могут ее не увидеть)
  • Для SEO-оптимизации предпочтительнее другие методы (например, раскрывающиеся блоки)
  • Сочетайте с ARIA-атрибутами для лучшей доступности

Доступность (ARIA):

<dfn hidden aria-hidden="true">Легаси-код</dfn> <span class="visually-hidden">Определение скрыто</span>

Ограничения и совместимость:

  • Поддерживается всеми современными браузерами
  • В IE11 требует полифила или использования CSS-эквивалента
  • Скрытый контент не индексируется некоторыми поисковыми системами
  • Не влияет на производительность (элемент полностью исключается из рендеринга)

Примечание: Атрибут hidden удобен для управления видимостью терминов без изменения CSS, но не злоупотребляйте им. Для контента, который должен быть доступен поисковым системам, но скрыт от пользователей до определенного действия, лучше использовать другие методы (например, aria-expanded с JavaScript).