Атрибут data-* тега <em>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в элементах <em> для использования в JavaScript или CSS. Эти пользовательские атрибуты не влияют на отображение по умолчанию.
Особенность: Имена атрибутов должны начинаться с
Пример использования:
data- и содержать только буквы в нижнем регистре, цифры, дефисы и подчеркивания.
<p>
В этом предложении <em data-term-id="123" data-category="linguistics">акцентирован</em>
важный термин со скрытыми метаданными.
</p>
Основные применения:
| Применение | Пример | Описание |
|---|---|---|
| Хранение ID | data-term-id="T-42" |
Уникальный идентификатор акцентированного элемента |
| Категоризация | data-term-type="technical" |
Тип акцентированного содержимого |
| Взаимодействие с JS | data-original-text="important" |
Дополнительные данные для скриптов |
Доступ к данным в JavaScript:
<p>
<em id="example-em" data-term="paradigm" data-count="3">Пример</em>
использования data-атрибутов.
</p>
<script>
const em = document.getElementById('example-em');
// Чтение данных
console.log(em.dataset.term); // "paradigm"
console.log(em.dataset.count); // "3" (всегда строка)
// Изменение данных
em.dataset.count = "4";
em.dataset.lastUpdated = new Date().toISOString();
// Преобразование в число
const countNum = parseInt(em.dataset.count);
</script>
Использование в CSS:
<style>
/* Стилизация по типу термина */
em[data-term-type="technical"] {
font-family: monospace;
background: #f3f3f3;
}
/* Добавление иконки через псевдоэлемент */
em[data-term-important="true"]::after {
content: " (!)";
color: red;
}
</style>
<p>
<em data-term-type="technical">HTML</em> и
<em data-term-important="true">CSS</em> - основные веб-технологии.
</p>
Пример с JSON данными:
<p>
Термин <em data-term-info='{"id":42,"categories":["tech","web"]}'>JavaScript</em>
содержит сложные данные.
</p>
<script>
const term = document.querySelector('[data-term-info]');
const termInfo = JSON.parse(term.dataset.termInfo);
console.log(termInfo.categories); // ["tech", "web"]
</script>
Рекомендации по именованию:
- Используйте kebab-case (дефисы между словами)
- Делайте имена краткими, но описательными
- Придерживайтесь единого стиля в проекте
- Избегайте избыточных префиксов (
data-term-вместоdata-term-data-)
Ограничения и особенности:
- Значения всегда строки (для чисел нужно преобразование)
- Не поддерживают сложные структуры без JSON
- Не влияют на SEO (поисковые системы их не индексируют)
- Доступны только после полной загрузки DOM
Пример динамического обновления:
<p>
<em id="dynamic-em" data-clicks="0">Кликабельный элемент</em>
</p>
<script>
const em = document.getElementById('dynamic-em');
em.addEventListener('click', () => {
const clicks = parseInt(em.dataset.clicks) + 1;
em.dataset.clicks = clicks;
em.textContent = `Кликов: ${clicks}`;
});
</script>
Примечание: Атрибуты data-* особенно полезны для интерактивных элементов с акцентированным текстом, где требуется хранить дополнительные метаданные. Для сложных структур данных рассмотрите использование JavaScript-объектов вместо множества data-атрибутов.