Атрибут data-* тега <cite>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в теге <cite> для использования в JavaScript или CSS. Эти атрибуты не влияют на отображение, но полезны для хранения метаданных.
<cite data-author="Лев Толстой" data-year="1869">
Война и мир
</cite>
Основные правила именования:
| Правило | Пример | Неправильно |
|---|---|---|
Префикс data- |
data-author |
author |
| Только строчные буквы | data-page-number |
data-pageNumber |
| Дефис для разделения слов | data-book-id |
data_book_id |
Доступ из JavaScript:
<cite id="book-cite" data-genre="novel" data-pages="1225">
Анна Каренина
</cite>
<script>
const cite = document.getElementById('book-cite');
// Доступ через dataset
console.log(cite.dataset.genre); // "novel"
console.log(cite.dataset.pages); // "1225"
// Изменение значения
cite.dataset.pages = "1300";
</script>
Использование в CSS:
<style>
cite[data-genre="novel"] {
color: darkblue;
}
cite[data-pages="1225"]::after {
content: " (объемное произведение)";
font-size: smaller;
}
</style>
<cite data-genre="novel" data-pages="1225">Война и мир</cite>
Рекомендации по использованию:
- Используйте для хранения информации, связанной с элементом
- Не храните большие объемы данных (лучше использовать JSON в data-атрибуте)
- Для сложных данных используйте
data-json='{"key":"value"}' - Избегайте дублирования информации, уже присутствующей в контенте
Пример с JSON данными:
<cite data-book='{"author":"Достоевский","year":1866}'>
Преступление и наказание
</cite>
<script>
const bookData = JSON.parse(
document.querySelector('cite').dataset.book
);
console.log(bookData.author); // "Достоевский"
</script>
Особенности работы:
- Значения всегда возвращаются как строки (для чисел нужна конвертация)
- Доступны через свойство
datasetв JavaScript - Могут использоваться в CSS-селекторах
- Не влияют на семантику или доступность
Важные замечания:
- Не используйте для критически важных данных (можно изменить в DevTools)
- Для SEO лучше использовать микроразметку вместо data-атрибутов
- Имена атрибутов чувствительны к регистру в dataset
- Поддерживаются всеми современными браузерами
Примечание: Атрибуты data-* идеально подходят для хранения вспомогательной информации о цитатах, такой как автор, год издания или жанр, без нарушения семантической структуры документа.