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

Описание

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

Пример использования:
<q data-author="Александр Пушкин" data-source="Евгений Онегин" data-year="1833"> Любви все возрасты покорны </q>

Типичные сценарии применения:

Атрибут Назначение Пример
data-author Автор цитаты data-author="Ф. Достоевский"
data-source Источник цитаты data-source="Преступление и наказание"
data-page Номер страницы data-page="124"
data-lang Язык оригинала data-lang="ru"

Пример с JavaScript обработкой:

<q id="famousQuote" data-author="Альберт Эйнштейн" data-category="наука"> Воображение важнее знания </q> <script> const quote = document.getElementById('famousQuote'); console.log('Автор:', quote.dataset.author); console.log('Категория:', quote.dataset.category); </script>

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

  • Имена атрибутов должны быть в kebab-case (дефисы между словами)
  • Значения всегда строковые (для других типов требуется преобразование)
  • Доступ через свойство dataset в JavaScript
  • Не влияют на SEO при правильном использовании

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

  • Используйте для хранения мета-информации о цитате
  • Избегайте хранения больших объемов данных
  • Для сложных структур используйте JSON в одном атрибуте
  • Придерживайтесь единого стиля именования в проекте

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

<q data-quote-meta='{"author":"М. Булгаков","work":"Мастер и Маргарита","year":1966}'> Никогда ничего не просите! Сами предложат и сами всё дадут! </q> <script> const meta = JSON.parse(document.querySelector('q').dataset.quoteMeta); console.log(meta.author); // "М. Булгаков" </script>

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