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

Описание

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

Пример использования:
<p data-author="Иван Иванов" data-publish-date="2025-05-15"> Этот абзац содержит скрытые метаданные об авторе и дате публикации. </p>

Основные правила именования:

Правило Пример
Должен начинаться с data- data-id, data-status
Может содержать дефисы data-user-id
Значение может быть любой строкой data-visible="true"

Доступ из JavaScript:

<p id="story" data-chapter="5" data-genre="fantasy">...</p> <script> const paragraph = document.getElementById('story'); console.log(paragraph.dataset.chapter); // "5" console.log(paragraph.dataset.genre); // "fantasy" // Изменение данных paragraph.dataset.chapter = "6"; </script>

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

<style> p[data-priority="high"] { border-left: 3px solid #ff0000; padding-left: 10px; } p[data-status="draft"] { opacity: 0.7; font-style: italic; } </style> <p data-priority="high">Важное сообщение</p> <p data-status="draft">Черновик текста</p>

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

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

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

<p id="user-info" data-user='{"id":123,"name":"John","roles":["admin","editor"]}'> Информация о пользователе </p> <script> const userData = JSON.parse(document.getElementById('user-info').dataset.user); console.log(userData.name); // "John" </script>

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

  • Доступны через свойство dataset в JavaScript
  • Имена атрибутов преобразуются в camelCase (data-user-id → userId)
  • Не влияют на отображение по умолчанию
  • Не используются поисковыми системами

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