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

Описание

Атрибуты data-* позволяют хранить дополнительную информацию в элементе <strong>. Эти пользовательские атрибуты не влияют на отображение, но могут быть использованы в CSS и JavaScript.

Пример использования:
<p> <strong data-importance="high" data-category="warning">Внимание!</strong> Это важное сообщение. </p>

Синтаксис data-атрибутов:

Формат Пример Описание
data-имя data-id Простой атрибут
data-составное-имя data-user-role Составное имя (дефисы вместо camelCase)

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

  • Не влияют на визуальное отображение по умолчанию
  • Могут использоваться для CSS-селекторов
  • Доступны через JavaScript API
  • Поддерживаются всеми современными браузерами

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

<style> strong[data-importance="high"] { color: #d32f2f; } strong[data-category="warning"]::after { content: " ⚠"; } </style> <p> <strong data-importance="high" data-category="warning">Важно</strong>: Не забудьте сохранить изменения. </p>

Рекомендации:

  • Используйте для хранения информации, связанной с элементом
  • Придерживайтесь именования через дефис (data-user-name)
  • Не злоупотребляйте хранением больших объемов данных
  • Для сложных данных используйте JSON в одном атрибуте

Ограничения:

  • Значения всегда строковые (нужно преобразовывать числа/булевы)
  • Не предназначены для хранения больших объемов данных
  • Доступ через dataset не поддерживается в очень старых браузерах

Пример с JSON данными:

<strong id="alert-message" data-meta='{"priority":1,"expires":"2023-12-31"}'> Временное сообщение </strong>

Примечание: Data-атрибуты особенно полезны для хранения информации, связанной с конкретным элементом DOM, без использования дополнительных JavaScript-структур.