Синтаксис data-* и соглашения об именовании
Разберитесь в допустимых именах атрибутов data-* и их назначении
«Синтаксис data-* и соглашения об именовании» — бесплатный урок HTML Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.
Повторение: атрибуты data-*
Атрибуты данных (data-*) хранят пользовательскую информацию в элементах HTML:
<div data-user-id="42" data-role="admin" data-active="true">
User Card
</div>Допустимые правила именования
Требования к именованию атрибутов data-*:
- Имя должно начинаться с
data- - После него должен быть хотя бы один символ
- Разрешены только строчные буквы, цифры, дефисы, символы подчёркивания, точки и двоеточия
- Прописные буквы запрещены (анализатор HTML переводит имена атрибутов в нижний регистр)
- Пробелы запрещены
Соглашения об именовании
Соглашения сообщества об именовании:
<!-- BEM-style: module__element--modifier -->
data-card="profile"
data-card-id="42"
data-card-state="expanded"
<!-- Descriptive: domain-concept -->
data-product-id="SKU-123"
data-analytics-event="click-cta"
data-feature-flag="dark-mode"Несколько атрибутов данных
Элемент может иметь любое количество атрибутов data:
<button
type="button"
data-action="delete"
data-target-id="user-42"
data-confirm="true"
data-confirm-message="Delete this user permanently?"
>Delete</button>Значения всегда являются строками
Значения атрибутов data всегда являются строками — разбирайте их в JavaScript:
const el = document.querySelector('[data-user-id]');
console.log(el.dataset.userId); // '42' (string)
console.log(typeof el.dataset.userId); // 'string'
// Parse to number:
const id = parseInt(el.dataset.userId, 10); // 42 (number)
// Parse to boolean:
const active = el.dataset.active === 'true'; // true (boolean)
// Parse to JSON:
const config = JSON.parse(el.dataset.config); // objectХранение JSON в data-*
Храните сложные данные в виде строк JSON:
<div
data-config='{"theme":"dark","locale":"en-US","pageSize":20}'
id="app"
></div>
<script>
const el = document.getElementById('app');
const config = JSON.parse(el.dataset.config);
console.log(config.theme); // 'dark'
console.log(config.pageSize); // 20
</script>data-* и пользовательские элементы
Когда выбирать data-*, пользовательские элементы или объекты JavaScript:
- data-* — метаданные, относящиеся к конкретному элементу, видимые в HTML и доступные из CSS
- Пользовательские элементы — сложные повторно используемые компоненты с инкапсулированным поведением
- JavaScript Map/WeakMap — данные, которые не нужны в HTML, а также большие или сложные данные
Использование data-* во фреймворках
Распространённые способы использования атрибутов data во фреймворках:
<!-- Bootstrap: target collapsible elements -->
<button data-bs-toggle="collapse" data-bs-target="#menu">
Toggle
</button>
<!-- Alpine.js: component data -->
<div x-data="{ open: false }">
<!-- Stimulus: controller identification -->
<div data-controller="menu" data-menu-open-value="false">
<!-- Testing libraries: stable selectors -->
<button data-testid="submit-btn">Submit</button>Доступность и data-*
Атрибуты data не озвучиваются программами чтения с экрана — не используйте их для информации о доступности:
<!-- BAD: accessibility info in data-* -->
<button data-label="Close dialog">×</button>
<!-- Screen reader does NOT read data-label -->
<!-- GOOD: use aria-label for accessibility -->
<button aria-label="Close dialog">×</button>Вопросы производительности
Атрибуты data-* оказывают незначительное влияние на производительность:
- Чтение dataset выполняется быстро (O(1))
- Интенсивное использование data-* у тысяч элементов не представляет проблемы
- Хранить большие блоки данных (изображения, большие объекты JSON) в data-* неэффективно
- Используйте WeakMap для хранения больших объектов JS, связанных с элементами DOM
Итоги: рекомендации по data-*
Рекомендации по использованию data-*:
- Используйте имена в нижнем регистре с дефисами
- Значения всегда являются строками — при необходимости разбирайте их
- Для JSON используйте: JSON.stringify / JSON.parse
- Используйте их для метаданных, необходимых CSS или JavaScript
- Они не заменяют атрибуты ARIA
- Не храните секреты (они видны в DevTools)
Быстрая проверка
Какой тип dataset всегда возвращает для значений атрибутов?
Повторение: синтаксис data-*
Основные правила именования data-*:
- Формат:
data-[lowercase-name]="value" - Доступ:
element.dataset.camelCaseName - Все значения являются строками — разбирайте их явно
- Для сложных данных храните JSON
- Используйте нижний регистр, без прописных букв и пробелов в имени атрибута
Часто задаваемые вопросы
Урок «Синтаксис data-* и соглашения об именовании» бесплатный?
Да — полный текст урока «Синтаксис data-* и соглашения об именовании» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.
Чему я научусь в уроке «Синтаксис data-* и соглашения об именовании»?
Разберитесь в допустимых именах атрибутов data-* и их назначении Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML Academy?
Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Синтаксис data-* и соглашения об именовании»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML Academy?
Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Синтаксис data-* и соглашения об именовании
- Доступ к data-* через dataset в JavaScript
- Использование data-* с селекторами атрибутов CSS
- Практические шаблоны: всплывающие подсказки и отслеживание состояния