Логотип YeaHub

База вопросов

Собеседования

Тренажёр

База ресурсов

Обучение

Навыки

Войти

Выбери, каким будет IT завтра — вместе c нами!

YeaHub — это полностью открытый проект, призванный объединить и улучшить IT-сферу. Наш исходный код доступен для просмотра на GitHub. Дизайн проекта также открыт для ознакомления в Figma.

© 2026 YeaHub

Документы

Медиа

Назад
Вопрос про HTML: доступность

Для чего нужны data-атрибуты?

Этот вопрос проверяет знание механизма хранения дополнительной информации в HTML-элементах, которая используется для взаимодействия с JavaScript, но не отображается на странице.

Короткий ответ

Data-атрибуты — это пользовательские атрибуты, начинающиеся с data-, которые позволяют хранить дополнительные данные в HTML-элементах. Эти данные могут быть использованы JavaScript для динамической обработки элементов на странице. Data-атрибуты удобны для передачи данных без необходимости изменения структуры HTML или использования скрытых полей.

Длинный ответ

Data-атрибуты — это механизм хранения пользовательских данных в HTML-элементах с помощью атрибутов, начинающихся с data-. Например, data-id, data-name, и т.д. Эти атрибуты не влияют на отображение контента, но позволяют хранить информацию, которую можно легко извлечь с помощью JavaScript и использовать для работы с элементами страницы.

Пример использования:

<button data-product-id="12345" data-category="books">Купить книгу</button>

В этом примере кнопка содержит два data-атрибута: data-product-id и data-category. JavaScript может получить доступ к этим значениям следующим образом:

const button = document.querySelector('button'); 
const productId = button.getAttribute('data-product-id'); 
console.log(productId); // 12345

Data-атрибуты удобны для передачи информации от HTML в JavaScript без необходимости использовать дополнительные элементы или усложнять HTML-разметку. Они активно применяются в динамических интерфейсах, для управления событиями и хранения уникальных данных, связанных с элементом.

Уровень

  • Рейтинг:

    1

  • Сложность:

    3

Навыки

  • HTML

    HTML

Ключевые слова

#доступность

Подпишись на React Developer в телеграм