Атрибут data-* тега <blockquote>
Описание
Пользовательские атрибуты data-* для тега <blockquote> позволяют хранить дополнительную информацию о цитате. Используется для:
- Связи цитаты с метаданными
- Хранения информации об авторе и источнике
- Интеграции с JavaScript-логикой
- Добавления микроразметки и аналитики
Пример использования:
<blockquote
data-author="Альберт Эйнштейн"
data-source="Книга 'Мир, каким я его вижу'"
data-year="1934"
data-category="science">
<p>Воображение важнее знания.</p>
<footer>— <cite>Мир, каким я его вижу</cite></footer>
</blockquote>
Типичные data-атрибуты для цитат:
| Атрибут | Назначение | Пример значения |
|---|---|---|
data-author |
Полное имя автора | "Фёдор Достоевский" |
data-source |
Название источника | "Преступление и наказание" |
data-page |
Номер страницы | "123" |
data-verified |
Факт проверки | "true" |
Доступ через JavaScript:
const quote = document.querySelector('blockquote');
console.log('Автор:', quote.dataset.author);
console.log('Источник:', quote.dataset.source);
// Динамическое обновление
quote.dataset.verified = "true";
Пример с JSON-данными:
<blockquote data-meta='{"author":"Марк Твен","source":"Приключения Тома Сойера","year":1876}'>
<p>Правда страннее вымысла...</p>
</blockquote>
<script>
const meta = JSON.parse(document.querySelector('blockquote').dataset.meta);
console.log(meta.year); // 1876
</script>
Совет: Для сложных структур данных используйте один data-meta атрибут с JSON вместо множества отдельных атрибутов.
Рекомендации:
- Используйте осмысленные имена data-атрибутов
- Храните только невизуальные данные
- Для важной информации дублируйте в видимом тексте
- Избегайте хранения больших объемов данных