HTML Academy · Урок

id, class, style и title

Применяйте основные глобальные атрибуты к любому элементу HTML

«id, class, style и title» — бесплатный урок HTML Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

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

Глобальные атрибуты можно применять к любому элементу HTML:

id — уникальный идентификатор
class — один или несколько классов CSS
style — встроенный CSS
title — текст всплывающей подсказки
И многие другие: lang, hidden, tabindex, data-*...

Атрибут id

Атрибут id присваивает элементу уникальный идентификатор:

<h2 id="installation">Installation Guide</h2>
<form id="signup-form">...</form>
<div id="hero-banner">...</div>

<!-- Rules:
  - Must be unique per page
  - No spaces
  - Use hyphens: user-profile
  - Case-sensitive: #hero ≠ #Hero
-->

Применение id

Атрибут id используется для разных целей:

Выбор в CSS: #hero-banner { ... }
Выбор в JavaScript: document.getElementById('signup-form')
Навигация по фрагментам: <a href="#installation">
Добавление меток ARIA: aria-labelledby="modal-title"

Атрибут class

Атрибут class присваивает один или несколько классов CSS:

<p class="text-large">Large text paragraph.</p>
<button class="btn btn-primary">Submit</button>
<div class="card card-featured highlighted">...</div>

<!-- Multiple classes separated by spaces -->
<!-- Elements can share classes (unlike id) -->
<!-- JavaScript: element.classList.add('active') -->

id и class

Когда использовать каждый из них:

id — для одного конкретного элемента на странице
class — для шаблона стилей, применяемого к нескольким элементам

<!-- id: unique element -->
<main id="main-content">...</main>

<!-- class: reusable style -->
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card card-featured">Featured</div>

Атрибут style

Атрибут style добавляет встроенный CSS:

<p style="color: red; font-weight: bold;">Warning message</p>
<div style="background: #f0f4f8; padding: 1rem; border-radius: 0.5rem;">
  Info box
</div>

<!-- Inline styles have the highest specificity
     They are hard to override and hard to maintain
     Prefer external CSS classes whenever possible -->

Когда использовать встроенный style

Встроенный style допустим в следующих случаях:

Динамические значения, заданные с помощью JavaScript
Значения, которые нельзя заранее знать при написании CSS (цвета и ширина, заданные пользователем)
HTML для электронной почты (почтовые клиенты удаляют внешний CSS)

Не используйте style для статических вариантов оформления — для этого предназначен CSS.

Атрибут title

Атрибут title отображает текст всплывающей подсказки при наведении:

<abbr title="HyperText Markup Language">HTML</abbr>
<button title="Submit the registration form">Submit</button>
<a href="/docs" title="Full documentation (opens in new tab)" target="_blank" rel="noopener">Docs</a>

Ограничения доступности атрибута title

Атрибут title имеет существенные проблемы с доступностью:

Недоступен при навигации с клавиатуры
Не отображается на сенсорных экранах
Поведение программ чтения с экрана непредсказуемо
Никогда не помещайте важную информацию только в title

Для важной информации используйте aria-label или видимый текст.

Специфичность: id, class и встроенные стили

Специфичность CSS от самой низкой к самой высокой:

/* Element selector: 0-0-1 */
p { color: gray; }

/* Class selector: 0-1-0 */
.text { color: blue; }

/* ID selector: 1-0-0 */
#unique { color: green; }

/* Inline style: 1-0-0-0 (highest) */
<p style="color: red;">Red wins</p>

Соглашения об именовании class

Популярные соглашения об именовании class:

<!-- BEM (Block Element Modifier) -->
<div class="card">
  <div class="card__header">
    <h2 class="card__title card__title--featured">Title</h2>
  </div>
</div>

<!-- Utility classes (Tailwind style) -->
<div class="flex items-center gap-4 p-4 bg-white rounded-lg shadow">

Проверка знаний

Каково главное правило для атрибута id?

Повторение: id, class, style и title

Основные глобальные атрибуты:

id — уникален на странице; используется для CSS, JavaScript, фрагментов и ARIA
class — можно переиспользовать; несколько классов разделяются пробелами
style — встроенный CSS (используйте умеренно, отдавая предпочтение внешнему CSS)
title — всплывающая подсказка; недоступна пользователям клавиатуры и сенсорных устройств
Специфичность id в CSS выше специфичности class

Часто задаваемые вопросы

Урок «id, class, style и title» бесплатный?

Да — полный текст урока «id, class, style и title» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «id, class, style и title»?

Применяйте основные глобальные атрибуты к любому элементу HTML Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «id, class, style и title»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к HTML Academy