Добавление пользовательского атрибута в HTML: возможности и правила

Быстрый ответ

HTML5 позволяет создавать пользовательские атрибуты с помощью префикса data-. Вот пример использования этого функционала на практике:

<button data-action="save">Сохранить</button>

Для обращения к этим атрибутам в JavaScript используется свойство .dataset:

let action = document.querySelector('button').dataset.action; // возвращает 'save'

Префикс data- рекомендуется использовать для обеспечения совместимости и предотвращения конфликтов с возможными атрибутами HTML в будущем.

Глубокое понимание пользовательских атрибутов

Умеренность важней всего

Пользовательские атрибуты полезны, однако с ними следует обращаться аккуратно. Их избыток может запутать код и препятствовать корректной работе программ экранного чтения.

Подробнее об этом расскажет наш спикер на видео

Удобство использования jQuery

Для работы с пользовательскими атрибутами data- в jQuery предусмотрена функция data(), которая облегчает ввод и получение данных:

$('button').data('action', 'cancel'); // установка data-action в 'cancel'
let action = $('button').data('action'); // возвращает 'cancel'

Однако стоит помнить, что при ручном изменении атрибутов data-, jQuery может не отобразить актуальные данные без обновления DOM.

Создание собственного DTD

Для валидации пользовательских атрибутов можно определить собственное объявление типа документа (DTD, Document Type Definition):

<!ATTLIST element-name custom-attribute CDATA #IMPLIED>

Эта запись определяет атрибут как необязательный. Однако этот подход является довольно консервативным и большинство случаев его использование избыточно благодаря гибкости HTML5.

Визуализация

HTML без пользовательских атрибутов:
🏢🏣🏬🏦🏨

HTML c пользовательскими атрибутами (например, 'data-'):
🏢[🗂️]🏣[🗂️]🏬[🗂️]🏦[🗂️]🏨[🗂️]

Атрибуты data- выступают в роли системы хранения данных, добавляя каждому элементу дополнительный контекст.

Элементы HTML с 'data-':
🏦 data-department="finance" 💰
🏥 data-department="health" 💉
🏬 data-department="retail" 🛍️

Сейчас к каждому элементу подключён уникальный атрибут, расширяющий его семантику.

Освоение техники пользовательских атрибутов

Важность доступности

Пользоваться атрибутами data- следует так, чтобы всегда сохранять доступность контента. Не рекомендуется их применение для определения стилей или поведения элементов, чтобы контент был доступен для всех.

Универсальность – залог успеха

Проверка корректного отображения в различных браузерах гарантирует одинаковый пользовательский опыт.

Стандарты — фундамент хорошего кодирования

Соблюдение стандартов HTML является обязательным. Воспользуйтесь сервисом W3C Markup Validation Service для проверки вашего документа, чтобы ваш код был не только верным, но и отточенным.

Полезные материалы

1. HTML Global data-* Attributes — обзор атрибутов data- с примерами на сайте W3Schools.
2. Using data attributes — Learning web development | MDN — подробное изучение атрибутов data- на портале Mozilla MDN.
3. HTML Standard — официальная спецификация HTML по встраиванию пользовательских данных.
4. A Complete Guide to Data Attributes | CSS-Tricks — сочетание CSS и JavaScript с атрибутами data-.
5. How and Why to Use HTML5 Custom Data Attributes — SitePoint — рассказ о том, почему и как использовать пользовательские атрибуты данных HTML5.
6. The W3C Markup Validation Service — инструмент для поддержания качественного кода и соответствия HTML стандартам.
7. Selectors Level 3 — документация W3C по селекторам атрибутов.