Атрибуты

Атрибуты — это «настройки» тегов. Они задаются в открывающем теге: <div id="main" class="container">. Глобальные атрибуты (id, class, style, title, data-*, aria-*) работают с ЛЮБЫМ тегом и расширяют его возможности.

Глобальные атрибуты (работают с любым тегом):

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

• Только один элемент может иметь данный id на странице
• Используется для: CSS (#id), JavaScript (getElementById), якорных ссылок (#id)

class — CSS-класс(ы):

• Несколько элементов могут иметь один класс
• Один элемент может иметь несколько классов (через пробел)
• Используется для CSS (.class) и JavaScript (getElementsByClassName)

style — инлайн-стили:

• <div style="color: red;">Текст</div>
• Не рекомендуется (нарушает разделение HTML/CSS)

title — всплывающая подсказка:

• <abbr title="HyperText">HTML</abbr>
• Показывается при наведении мыши

data-* — пользовательские данные:

• <div data-user-id="123" data-role="admin">
• Доступны через JavaScript: element.dataset.userId

aria-* — доступность:

• aria-label — метка для скринридеров
• aria-hidden="true" — скрыть от скринридеров
• aria-describedby — связать с описанием

Атрибуты — как наклейки (labels) на коробке. id — штрихкод (уникальный). class — категория («хрупкое», «электроника»). data-* — скрытая информация для работников (складской номер). aria-* — инструкция для грузчика (скринридера).

**Самый простой:**

<div id="header" class="main-header">
  <h1 class="title">Заголовок</h1>
</div>
<p class="text muted">Параграф со двумя классами.</p>

id — уникальный, class — повторяемый. Один элемент может иметь несколько классов.

**Простой:**

<!-- data-атрибуты для JavaScript -->
<button data-action="delete" data-id="42">Удалить</button>

<!-- title для подсказки -->
<abbr title="Cascading Style Sheets">CSS</abbr>

<!-- aria для доступности -->
<nav aria-label="Основная навигация">
  <a href="/">Главная</a>
</nav>

<!-- aria-hidden -->
<svg aria-hidden="true" focusable="false">
  <circle cx="50" cy="50" r="40"/>
</svg>

data-* для JS, title для подсказок, aria-* для доступности.

**Реальный пример:**

<article id="post-42" class="blog-post featured"
         data-author="ivan" data-published="2025-01-15">
  <header>
    <h2 class="post-title">Заголовок статьи</h2>
    <time datetime="2025-01-15" class="post-date">15 января</time>
  </header>
  <div class="post-content">
    <p>Текст статьи...</p>
  </div>
  <footer class="post-footer">
    <span class="author" aria-label="Автор: Иван Иванов">Иван Иванов</span>
  </footer>
</article>

Реальный пример: статья с id, классами, data-атрибутами и aria-метками.

**Неправильно:** Использовать id для стилей (вместо class)

**Почему:** id — уникальный. Если нужно применить стиль к нескольким элементам — нужен class. К тому же specificity #id очень высокий.

**Правильно:** Для стилей — class. Для уникальных идентификаторов (якоря, JS) — id.

**Неправильно:** Дублировать id на странице

**Почему:** id должен быть уникальным. Дубликаты ломают CSS-селекторы и JavaScript.

**Правильно:** Каждый id на странице должен быть уникальным.

**Неправильно:** Использовать style="..." (инлайн-стили) повсюду

**Почему:** Инлайн-стили нарушают разделение HTML/CSS, difficult to maintain и переиспользовать.

**Правильно:** Для стилей используйте внешний CSS-файл или <style>. Inline — только для динамических стилей из JS.

• id — уникальный на странице, class — повторяемый
• data-* — пользовательские данные для JavaScript
• aria-* — улучшают доступность для скринридеров
• title — всплывающая подсказка
• Инлайн-стили (style) — не рекомендуются для массового использования

Назад: Вы знаете семантическую разметку (H13) — атрибуты добавляют элементам метаданные.

Вперёд: В следующем уроке (H15) вы изучите метаданные: meta-теги, Open Graph и настройку документа.