HTML — id и class

Привет! Ты уже знаешь, что у тегов бывают атрибуты id и class. На первый взгляд кажется, что это почти одно и то же — «какая-то метка для элемента». На самом деле между ними огромная разница, и если её не понять сейчас — потом будешь тратить кучу времени на исправление странного поведения стилей и скриптов.

Главные отличия в одной таблице (запомни навсегда)

Характеристика	id	class
Уникальность	Должен быть уникальным на всей странице	Может повторяться сколько угодно раз
Сколько элементов может иметь	Только один элемент на страницу	Сколько угодно элементов
Синтаксис в CSS	#main-header	.card, .btn-primary, .text-center
Синтаксис в JavaScript	document.getElementById() — самый быстрый способ	document.querySelectorAll(‘.card’) или .getElementsByClassName()
Семантика / смысл	«Это конкретно этот элемент»	«Этот элемент относится к такой-то группе»
Количество на одном элементе	Только один id	Можно несколько классов через пробел
Валидность HTML	Нарушение уникальности → ошибка валидации	Повторение классов — абсолютно нормально

Когда использовать id (реальные ситуации 2025–2026 года)

1. Якорные ссылки внутри страницыHTML<h2 id="contacts">Контакты</h2> ... <a href="#contacts">Перейти к контактам</a>
2. Главные блоки-ориентиры страницы (landmark roles)HTML<header id="site-header">...</header> <main id="main-content">...</main> <footer id="site-footer">...</footer>
3. Формы и их поля, когда нужен точный доступ через JSHTML<input id="search-input" type="text"> <button onclick="document.getElementById('search-input').focus()">Фокус на поиск</button>
4. Подключение к конкретным элементам в сложных виджетах (модальные окна, аккордеоны и т.д.)

Правило большого пальца: если ты можешь сказать «это единственный такой блок на всей странице» — скорее всего это id.

Когда использовать class (99% случаев в реальной разработке)

• Стилизация одинаковых элементов
• Поведение одинаковых элементов
• Компонентный подход (карточки, кнопки, меню, теги и т.д.)

Типичные классы, которые ты будешь видеть каждый день:

HTML

<div class="card product-item">
    <img class="card-img" src="phone.jpg" alt="Смартфон">
    <h3 class="card-title">iPhone 16 Pro</h3>
    <p class="card-price">119 990 ₽</p>
    <button class="btn btn-primary">В корзину</button>
</div>

Обрати внимание: один элемент может (и очень часто должен) иметь несколько классов.

Самые частые ошибки новичков (и как их не допускать)

1. Несколько элементов с одинаковым id → Браузер берёт первый, остальным — игнор → JavaScript может вести себя непредсказуемо → Падает валидация HTML
2. Использование id только для стилизации Плохо:CSS#button { background: blue; }Хорошо:CSS.btn-primary { background: blue; }
3. Писать id и class в стиле kebab-case вместо camelCase или snake_case Правильно в 2026 году: user-profile-card, btn-large, is-active (kebab-case — стандарт де-факто)

Быстрый чек-лист «id или class?»

• Этот элемент уникален на всей странице и я хочу к нему быстро обратиться? → id
• Я хочу одинаково стилизовать/поведенчески обработать много элементов? → class
• Мне нужно несколько разных стилей на одном элементе? → class (несколько штук)
• Я делаю якорную ссылку или автопрокрутку к блоку? → id