Глобальные атрибуты

id, class, lang, dir, title, hidden, data-*, aria-*, tabindex, translate и где они применяются во всех тегах.

Уровень: начальный 8 разделов 1 час

1. Что такое глобальные атрибуты

Атрибуты, которые можно писать в КАЖДОМ элементе: id, class, lang, title, hidden, style, tabindex, data-*, translate и др. Они не зависят от тега и создают «живой текст» для CSS, JS и доступности.

<p id="intro" class="text text--lead" lang="ru">Приветствуем!</p>

2. id — уникальный идентификатор

id уникален на странице (для якорей, JS, label);
имена информативные: "main-nav", не "qqq1";
id чувствителен к регистру;
VWU: не злоупотребляйте id для CSS — классы лучше.

<section id="pricing">…</section>
<label for="email">Почта</label>
<input id="email" type="email">

3. class — для CSS/JS

<div class="card card--featured">
  <h2 class="card__title"></h2>
</div>

class может быть несколько через пробел. Современный стиль — БЭМ: блок, элемент, модификатор (card, card__title, card--featured).

4. lang и dir

<html lang="ru">
<p lang="en">Hello world!</p>
<p dir="rtl">مرحبا</p>

lang — язык фрагмента (скринридер произносит, переводчик учитывает). dir — направление текста: ltr/rtl для арабского, иврита.

5. title и hidden

<p title="Нажмите, чтобы узнать цену" class="price">1 299 ₽</p>
<div hidden>Спрятанный блок без физического присутствия</div>

title — всплывающая подсказка (не ключевая информация!);
hidden — скрыть элемент (display:none по умолчанию);
не полагайтесь: title плохо доступен на тач.

6. data-* — свои данные

<button class="filter" data-filter="electronics">Техника</button>
<article data-id="42" data-category="news">…</article>

data-* — приватное хранилище значений для JS: ключи через дефис (data-user-name), значения — любые строки. Никогда не несите в них чувствительные данные.

7. aria-* для доступности

<button aria-expanded="false" aria-controls="menu">Меню</button>
<nav role="navigation" aria-label="Главная">…</nav>
<p aria-live="polite">Новое сообщение</p>

aria-expanded — состояние, aria-controls — что раскрывается, role — смысл, aria-live — объявить скринридеру изменение. Это «слоёная» надстройка к семантике.

8. tabindex и translate

<div tabindex="0">Фокусируемый div</div>   <!-- попадает в Tab -->
<div tabindex="-1">Программная фокусировка</div>
<p translate="no">#product42</p>

tabindex=0 — добавить в порядокTab, -1 — только через JS;
не табулируйте интерактивный слой самодельно без нужды;
translate=no — не переводить (код, имена, бренды).

Что дальше

Курс завершён.

← Вернуться к курсам