Атрибут id тега <data>
Описание
Атрибут id для тега <data> задаёт уникальный идентификатор элемента, позволяя обращаться к нему через CSS, JavaScript или якорные ссылки.
Особенность: В отличие от атрибута
Пример использования:
value, который хранит машинное значение, id служит для идентификации элемента в DOM.
<data id="current-temperature" value="23.5">23.5°C</data>
<script>
// Доступ через JavaScript
const tempElement = document.getElementById('current-temperature');
console.log('Значение:', tempElement.value); // "23.5"
console.log('Текст:', tempElement.textContent); // "23.5°C"
</script>
Основные применения:
| Технология | Пример использования | Преимущества |
|---|---|---|
| CSS | #price-value { color: green; } |
Точечное стилевое оформление |
| JavaScript | document.getElementById('user-score') |
Быстрый доступ к элементу |
| Фрагменты URL | page.html#data-reference |
Ссылки на конкретные данные |
Правила именования:
- Должен быть уникальным в пределах документа
- Должен начинаться с буквы (A-Z, a-z)
- Может содержать дефисы (-), подчёркивания (_), цифры и точки (.)
- Чувствителен к регистру в XHTML (рекомендуется lowercase)
- Избегайте кириллических и специальных символов
Пример с динамическим обновлением:
<data id="live-counter" value="0">0</data>
<button onclick="
const counter = document.getElementById('live-counter');
counter.value = parseInt(counter.value) + 1;
counter.textContent = counter.value;
">
Увеличить счетчик
</button>
Сочетание с другими атрибутами:
<data id="product-meta"
value="P-1001"
data-category="electronics"
class="highlight">
Смартфон X
</data>
<style>
#product-meta.highlight {
background-color: yellow;
}
</style>
Важные замечания:
- Не используйте для стилизации - применяйте классы
- Избегайте автоматически генерируемых ID (в CMS и фреймворках)
- Для динамического контента убедитесь в уникальности ID
- Проверяйте валидность через валидатор W3C
- Не дублируйте ID в iframe'ах и shadow DOM
Пример плохих практик:
<!-- Плохо: цифровой ID -->
<data id="123">...</data>
<!-- Плохо: дублирование ID -->
<data id="score">10</data>
<data id="score">20</data>
<!-- Плохо: кириллический ID -->
<data id="цена">100</data>
Примечание: Хотя атрибут id является стандартным для всех HTML-элементов, его использование с тегом <data> особенно полезно для создания связей между видимым содержимым и машинными значениями в JavaScript-приложениях и сложных интерфейсах.