HTML id и class: в чём разница и как правильно использовать

Один из частых вопросов у начинающих верстальщиков — HTML id и class: в чём разница и что выбрать для конкретного элемента. На первый взгляд оба атрибута просто «помечают» HTML-теги, но используются они по-разному. Ошибка в выборе может привести к запутанному CSS, неработающему JavaScript, проблемам с якорными ссылками и валидностью страницы.

Коротко: главное отличие id и class

id — это уникальный идентификатор элемента на странице. Один id должен встречаться в документе только один раз.

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

<section id="about" class="section section-light">
  <h2 class="section-title">О нас</h2>
  <p class="text text-muted">Короткое описание компании.</p>
</section>

В этом примере id="about" нужен для уникального блока «О нас», а классы section, section-light, section-title и другие — для оформления и переиспользования стилей.

Когда использовать id в HTML

Используйте id, когда элемент действительно уникален и к нему нужно обратиться как к конкретной точке страницы.

Пример 1: якорная ссылка

<nav>
  <a href="#contacts">Контакты</a>
</nav>

<section id="contacts">
  <h2>Контакты</h2>
  <p>Напишите нам на email.</p>
</section>

При клике браузер прокрутит страницу к элементу с id="contacts". Если на странице окажется несколько элементов с одинаковым id, поведение станет непредсказуемым и HTML будет невалидным.

Пример 2: label и input

<label for="user-email">Email</label>
<input id="user-email" name="email" type="email">

Атрибут for у label должен совпадать с id поля. Благодаря этому пользователь может нажать на текст «Email», и фокус перейдёт в поле ввода. Это удобно и важно для доступности.

Когда использовать class в HTML

class выбирайте почти всегда, когда речь идёт об оформлении, повторяющихся компонентах и состояниях интерфейса.

<article class="card">
  <h3 class="card-title">Базовый тариф</h3>
  <p class="card-text">Подходит для старта.</p>
</article>

<article class="card card-featured">
  <h3 class="card-title">Премиум тариф</h3>
  <p class="card-text">Больше возможностей.</p>
</article>

Теперь можно задать общий стиль для всех карточек и отдельный стиль для выделенной карточки:

.card {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 12px;
}

.card-featured {
  border-color: #4f46e5;
  background: #f5f3ff;
}

Такой подход масштабируется: если карточек станет 3, 10 или 100, один класс продолжит работать для всех.

Можно ли использовать id для CSS?

Технически можно:

#header {
  background: #111827;
  color: white;
}

Но в большинстве случаев для стилей лучше использовать классы. У селектора по id высокая специфичность, поэтому потом его сложнее переопределять. Это часто приводит к борьбе селекторов и лишнему !important.

Лучше так:

<header class="site-header">
  <nav class="main-nav">...</nav>
</header>

.site-header {
  background: #111827;
  color: white;
}

id и class в JavaScript

В JavaScript id удобно использовать для получения одного конкретного элемента:

const form = document.getElementById("subscribe-form");

А классы — для поиска группы элементов:

const buttons = document.querySelectorAll(".js-open-modal");

buttons.forEach((button) => {
  button.addEventListener("click", () => {
    console.log("Открываем модальное окно");
  });
});

Практический совет: для JavaScript часто удобно заводить отдельные классы с префиксом js-. Они показывают, что класс используется скриптом, а не только CSS. Например: js-menu-toggle, js-tabs-button, js-form.

Типичные ошибки новичков

Как называть id и class

Имена должны быть понятными и описывать назначение элемента, а не только внешний вид.

<!-- Плохо -->
<div class="blue-box">...</div>
<button class="btn1">Купить</button>

<!-- Лучше -->
<div class="pricing-card">...</div>
<button class="button button-primary">Купить</button>

Для классов часто используют подход БЭМ: блок, элемент, модификатор. Он особенно полезен в больших проектах.

<article class="product-card product-card--hit">
  <h3 class="product-card__title">Ноутбук</h3>
  <p class="product-card__price">75 000 ₽</p>
</article>

Если вы хотите не просто прочитать про атрибуты, а собрать полноценную страницу руками, посмотрите пошаговую практику вёрстки реального сайта с нуля. Там подобные решения закрепляются на живом макете, а не на абстрактных примерах.

Мини-шпаргалка: что выбрать

Итог

Разница между id и class в HTML проста: id — для уникального элемента, class — для групп, стилей и повторяемых компонентов. Хорошая практика — использовать id точечно, а основную вёрстку и CSS строить на классах. Так код будет понятнее, гибче и легче поддерживаться.

Источник