Чем глобальные атрибуты HTML отличаются от атрибутов конкретных элементов?

Глобальные атрибуты можно ставить на любой HTML-элемент, а остальные атрибуты имеют смысл только у определённых тегов.

Примеры глобальных атрибутов

• id, class, style — идентификация и оформление.
• hidden — скрывает элемент из рендера и из дерева доступности.
• tabindex — участие элемента в навигации по Tab.
• lang, dir — язык и направление текста.
• data-* — произвольные данные для скриптов и CSS.
• aria-*, role — информация для вспомогательных технологий.

Атрибуты конкретных элементов

href работает у <a>, src — у <img> и <script>, type и value — у <input>, for — у <label>. На другом теге браузер их игнорирует, а валидатор подсветит ошибку.

<a href="/docs" data-track="docs-link" hidden>Документация</a>
<input type="email" required data-field="email" />

На практике: id должен быть уникален на странице, а логика на data-* не должна подменять семантику: состояние лучше выражать нативными атрибутами и ARIA.

Коротко для собеседования

Глобальные атрибуты (id, class, hidden, data-* и другие) допустимы на любом элементе, остальные работают только у своих тегов. Состояние лучше выражать нативными атрибутами и ARIA, а не логикой на data-*.