Атрибут class тега <data>

Описание

Атрибут class для тега <data> позволяет назначать один или несколько CSS-классов элементу, что дает возможность стилизовать его и управлять им через CSS и JavaScript.

Пример использования:
<style> .product-id { font-weight: bold; color: #2c3e50; background-color: #ecf0f1; padding: 2px 5px; border-radius: 3px; } </style> <p> Товар: <data value="PRD-0042" class="product-id">0042</data> - Смартфон Premium </p>

Основные возможности:

Применение Пример Преимущества
Визуальное оформление .price { color: green; } Подсветка важных данных
JavaScript-селекторы document.querySelector('.product-code') Легкий доступ к элементам
Микроразметка .structured-data Семантическая группировка

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

  • Используйте семантические имена (.product-code вместо .blue-text)
  • Придерживайтесь единого стиля именования (kebab-case рекомендуется)
  • Избегайте избыточных классов (.data для <data> излишне)
  • Сочетайте с атрибутом value для комплексных решений
  • Документируйте используемые классы

Пример с JavaScript:

<p> Статус: <data value="active" class="status-badge">Активен</data> </p> <script> // Изменение стиля по значению const statusBadge = document.querySelector('.status-badge'); if (statusBadge.value === 'active') { statusBadge.classList.add('active-status'); } </script>

Комбинирование с другими атрибутами:

<style> [data-highlight="important"] { background-color: #fff3cd; padding: 0.2rem 0.5rem; } </style> <p> Примечание: <data value="warning" class="note" data-highlight="important"> Требуется подтверждение </data> </p>

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

  • Используйте для стилизации машинно-читаемых данных
  • Сочетайте с атрибутом value для динамического управления
  • Избегайте прямого стилевого оформления, если элемент чисто семантический
  • Применяйте для визуального выделения структурированных данных
  • Тестируйте отображение в разных браузерах

Примечание: Хотя тег <data> в первую очередь предназначен для семантической разметки, атрибут class позволяет эффективно интегрировать его в визуальное оформление страницы и логику JavaScript-приложений.