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

Описание

Атрибут id задаёт уникальный идентификатор для элемента <dfn>. Это позволяет:

  • Создавать якорные ссылки к определению термина
  • Обращаться к термину из JavaScript и CSS
  • Связывать термин с другими элементами через ARIA
Пример использования:
<dfn id="html-def">HTML</dfn> - язык гипертекстовой разметки <p>См. определение <a href="#html-def">HTML</a> выше.</p>

Правила именования ID:

Допустимо Недопустимо Причина
css-def css def Пробелы запрещены
term1 1term Не может начинаться с цифры
api_definition api:definition Двоеточия запрещены

Использование в JavaScript:

<dfn id="js-term">JavaScript</dfn> <script> const term = document.getElementById('js-term'); term.style.color = '#e53e3e'; term.addEventListener('click', () => { alert('Вы кликнули на определение JavaScript'); }); </script>

Связь с элементами формы:

<label for="html-input">Что означает HTML?</label> <input id="html-input" list="html-defs"> <datalist id="html-defs"> <option value="HyperText Markup Language"> <option value="Home Tool Markup Language"> </datalist> <dfn id="html-meaning">HTML</dfn> - HyperText Markup Language

Лучшие практики:

  • Используйте осмысленные имена (например, oop-def вместо def1)
  • ID должен быть уникальным в пределах всей страницы
  • Избегайте автоматически генерируемых ID (type-1, type-2 и т.д.)
  • Для стилизации предпочтительнее использовать классы

Пример сложного использования:

<article id="glossary"> <h2>Глоссарий</h2> <dfn id="def-api">API</dfn> - интерфейс программирования приложений <dfn id="def-oop">ООП</dfn> - объектно-ориентированное программирование </article> <aside> <h3>Быстрые ссылки</h3> <ul> <li><a href="#def-api">API</a></li> <li><a href="#def-oop">ООП</a></li> </ul> </aside>

SEO и доступность:

  • ID помогают поисковым системам понимать структуру документа
  • Якорные ссылки улучшают пользовательский опыт
  • Используйте ARIA-атрибуты для связи элементов (например, aria-describedby)
  • Не злоупотребляйте - слишком много ID усложняют поддержку кода

Примечание: Хотя атрибут id кажется простым, его правильное использование значительно улучшает организацию контента. Для технических терминов в документации рекомендуется создавать систему именования ID (например, term-[название] или def-[категория]-[термин]), чтобы облегчить навигацию и поддержку.