Атрибут data-* тега <mark>
Описание
Атрибуты data-* для тега <mark> позволяют хранить дополнительную информацию прямо в HTML-элементе. Эти пользовательские атрибуты полезны для связывания данных с определенными выделенными фрагментами текста.
<p>
В этом тексте выделены
<mark data-importance="high" data-category="definition">ключевые термины</mark>,
которые можно обрабатывать JavaScript.
</p>
Особенности работы:
| Атрибут | Пример | Использование |
|---|---|---|
data-importance |
data-importance="high" |
Определяет важность выделенного фрагмента |
data-category |
data-category="definition" |
Группирует выделения по категориям |
data-source |
data-source="user-generated" |
Указывает происхождение выделения |
Доступ к данным через JavaScript:
<p>
<mark id="example-mark" data-user="admin" data-timestamp="2023-11-15">
Пример выделенного текста
</mark>
</p>
<script>
const mark = document.getElementById('example-mark');
console.log(mark.dataset.user); // "admin"
console.log(mark.dataset.timestamp); // "2023-11-15"
// Добавление нового data-атрибута
mark.dataset.edited = 'true';
</script>
Пример с CSS-селекторами:
<style>
mark[data-importance="high"] {
background-color: #ffcdd2;
font-weight: bold;
}
mark[data-category="definition"] {
border-bottom: 1px dashed #2196F3;
}
</style>
<p>
<mark data-importance="high">Важное предупреждение</mark> и
<mark data-category="definition">определение термина</mark>.
</p>
Рекомендации по использованию:
- Используйте осмысленные имена атрибутов после префикса
data- - Храните только простые данные (для сложных структур используйте JSON)
- Не злоупотребляйте - только для данных, логически связанных с элементом
- Для SEO используйте микроразметку вместо data-атрибутов
Пример сложного использования:
<p>
<mark id="smart-mark"
data-annotation='{"type":"reference","page":42,"author":"Иванов"}'>
Цитата из исследования
</mark>
</p>
<script>
const mark = document.getElementById('smart-mark');
const annotation = JSON.parse(mark.dataset.annotation);
console.log(annotation.author); // "Иванов"
</script>
Ограничения и совместимость:
- Поддерживается всеми современными браузерами
- Имена атрибутов должны быть в нижнем регистре
- Не используйте для критически важных данных (можно изменить в DOM)
- Доступ через
datasetне работает в IE10 и ниже
Примечание: Атрибуты data-* особенно полезны для интерактивных систем выделения текста, учебных приложений или систем комментирования, где нужно связывать метаданные с определенными фрагментами контента.