Атрибут data-* тега <dfn>

Описание

Атрибуты data-* позволяют хранить дополнительную информацию в HTML-элементах. Для тега <dfn> (определение термина) это может быть полезно для хранения метаданных о термине, таких как источник определения, язык оригинала или категория.

Пример использования:
<dfn data-source="Wikipedia" data-lang="en" data-category="technology">HTML</dfn> - стандартизированный язык разметки документов для просмотра веб-страниц в браузере.

Доступ к данным через JavaScript:

<dfn id="ai-term" data-source="Oxford Dictionary" data-year="2020">Artificial Intelligence</dfn> <script> const term = document.getElementById('ai-term'); console.log(term.dataset.source); // "Oxford Dictionary" console.log(term.dataset.year); // "2020" // Можно также устанавливать новые значения term.dataset.category = "computer science"; </script>

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

<style> dfn[data-category="technology"] { color: #2b6cb0; border-left: 3px solid #2b6cb0; padding-left: 10px; } dfn[data-category="science"]::after { content: " (" attr(data-source) ")"; font-size: 0.8em; color: #718096; } </style> <dfn data-category="technology" data-source="TechTerms">Cloud Computing</dfn> <dfn data-category="science" data-source="Britannica">Quantum Physics</dfn>

Рекомендации по именованию:

Правильное Неправильное Причина
data-source-name data-SourceName В JavaScript будет dataset.sourceName
data-lang data-language Короче и соответствует стандартам
data-category dataCategory Должен содержать дефис

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

<dfn id="blockchain-def" data-definition="Децентрализованная база данных" data-related-terms='["криптовалюта", "смарт-контракт", "PoW"]' data-first-used="1991">Blockchain</dfn> <script> const term = document.getElementById('blockchain-def'); const relatedTerms = JSON.parse(term.dataset.relatedTerms); console.log(`Термин впервые использован в ${term.dataset.firstUsed}`); relatedTerms.forEach(term => console.log(`Связанный термин: ${term}`)); </script>

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

  • Используйте для хранения информации, которая не должна отображаться напрямую
  • Храните простые данные (для сложных структур используйте JSON)
  • Не злоупотребляйте - для больших объемов данных лучше использовать JavaScript-объекты
  • Используйте осмысленные имена после префикса data-
  • Значения всегда должны быть строками (для других типов используйте преобразование)

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

  • Атрибуты data-* не влияют на SEO напрямую
  • Не заменяйте ими важные семантические атрибуты вроде alt или title
  • Могут использоваться для хранения информации для скринридеров

Примечание: Атрибуты data-* особенно полезны для терминологических словарей и энциклопедий, где требуется хранить метаинформацию о определениях. Они обеспечивают чистую сепарацию между отображаемым содержимым и вспомогательными данными, что упрощает обработку информации скриптами.