Исполняемые доки HTML: Атрибуты HTML

Q: Чем class отличается от id в HTML?

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

Q: Как добавить элементу несколько классов?

Запишите их в один атрибут class через пробел: . Если написать class дважды, это не сработает: браузер оставит только первый.

Q: Почему кнопка с disabled="false" все равно неактивна?

disabled это логический атрибут: его наличие означает true, что бы ни было написано в значении. Чтобы включить элемент, удалите атрибут или выполните в JavaScript button.disabled = false, что его и удаляет.

Q: Можно ли придумать свои атрибуты HTML?

Используйте префикс data-: data-price="12" или data-user-id="7" допустимы у любого элемента, а в JavaScript они доступны через element.dataset. Придуманные имена без префикса делают HTML некорректным.

Что такое атрибуты HTML

Атрибут добавляет элементу информацию. Его пишут внутри открывающего тега: имя, знак равенства и значение в кавычках, name="value". У элемента может быть сколько угодно атрибутов, их разделяют пробелами.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Attributes</title>
</head>
<body>
  <a href="#note" title="Jumps to the note below">A link with href and title</a>
  <p>
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='28' fill='%2316a34a'/%3E%3C/svg%3E" alt="A green circle" width="60" height="60">
  </p>
  <input type="email" placeholder="you@example.com" required>
  <p id="note">Hover the link to see its title.</p>
</body>
</html>

href говорит ссылке, куда вести, src и alt описывают картинку, type, placeholder и required настраивают поле ввода. У каждого элемента свой набор атрибутов, а некоторые (глобальные атрибуты ниже) работают у любого элемента.

Правила синтаксиса

<input type="text" name="city" value="Paris" disabled>

Имя, знак равенства, значение в кавычках. Принято писать двойные кавычки; одинарные тоже работают (title='Say "hi"' позволяет поставить двойную кавычку внутри значения).
Имена не зависят от регистра. CLASS и class это один и тот же атрибут. Значения зависят: class="Box" и class="box" это разные классы.
Без пробелов кавычки необязательны, но ставьте их все равно. class=big box дает элементу класс big и второй, бессмысленный атрибут box.
Порядок не важен. <img alt="" src="a.png"> то же самое, что <img src="a.png" alt="">.
Каждое имя один раз на элемент. Если атрибут встречается дважды, браузер оставляет первый и молча отбрасывает второй.

Логические атрибуты

Некоторые атрибуты либо включены, либо выключены. У них наличие означает true, а значение игнорируется. Так работают disabled, checked, required, readonly, hidden, multiple, autofocus и open.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Boolean attributes</title>
</head>
<body>
  <p><button>No attribute: enabled</button></p>
  <p><button disabled>disabled: off</button></p>
  <p><button disabled="false">disabled="false": still off</button></p>
  <p><label><input type="checkbox" checked> checked</label></p>
</body>
</html>

Третья кнопка неактивна, хотя в значении написано false: браузер проверяет только, есть ли атрибут. Чтобы выключить логический атрибут, удалите его. В JavaScript именно это делает button.disabled = false.

Атрибут class

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>class</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .card { border: 2px solid #e5e7eb; border-radius: 8px; padding: 12px; margin-bottom: 8px; }
    .featured { border-color: #2563eb; }
    .muted { color: #6b7280; }
  </style>
</head>
<body>
  <div class="card">class="card"</div>
  <div class="card featured">class="card featured"</div>
  <div class="card featured muted">class="card featured muted"</div>
</body>
</html>

Каждый дополнительный класс добавляет свои правила поверх остальных. В CSS класс выбирают через точку (.card); в JavaScript классы меняют element.classList.add('featured') и classList.remove. Классы это обычный способ задавать стили: большая часть вашего CSS будет нацелена на классы.

Атрибут id

id дает элементу имя, которое должно быть уникальным на странице. Используйте его, когда нужен ровно один элемент: цель ссылки, <label for> или document.getElementById.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>id</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #pricing { background: #e5e7eb; padding: 12px; margin-top: 600px; }
  </style>
</head>
<body>
  <a href="#pricing">Jump to pricing</a>
  <p><label for="email">Email</label> <input id="email" type="email"></p>
  <section id="pricing">This section has id="pricing". The link above scrolls here.</section>
</body>
</html>

Клик по подписи ставит фокус в поле, потому что for="email" указывает на id="email". Ссылка прокручивает к #pricing, потому что фрагмент в href совпадает с id.

	`class`	`id`
Сколько элементов может его иметь	Любое количество	Один (уникальный)
Значений на элемент	Несколько, через пробел	Одно
Селектор CSS	`.name`	`#name`
Типичное применение	Стили для групп элементов	Цели ссылок, подписи, один конкретный элемент в JavaScript

В id не может быть пробелов. Начинайте его с буквы, чтобы им было удобно пользоваться в CSS: #2col не является корректным селектором CSS без экранирования.

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

Эти атрибуты работают у любого элемента:

Атрибут	Что делает
`id`	Уникальное имя элемента
`class`	Список имен классов через пробел
`style`	Встроенный CSS, например `style="color: red"`
`title`	Текст подсказки при наведении
`lang`	Язык содержимого, например `lang="fr"`
`dir`	Направление текста: `ltr`, `rtl` или `auto`
`hidden`	Скрывает элемент (логический)
`tabindex`	Делает элемент доступным для фокуса по Tab или задает порядок
`contenteditable`	Позволяет пользователю редактировать текст элемента
`data-*`	Ваши собственные данные, читаются из JavaScript

У атрибута lang есть отдельная страница, потому что он влияет на программы чтения с экрана, перевод и поиск.

Атрибуты data-*

Если нужно хранить на элементе собственное значение, добавьте к имени префикс data-. После префикса подойдет любое имя, а JavaScript читает значения через element.dataset, где дефисы превращаются в camelCase:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data attributes</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    button { margin: 4px; }
    #out { font-weight: bold; }
  </style>
</head>
<body>
  <button data-product-id="101" data-price="4.50">Tea</button>
  <button data-product-id="102" data-price="3.20">Coffee</button>
  <p id="out">Click a product.</p>
  <script>
    document.querySelectorAll('button').forEach((btn) => {
      btn.addEventListener('click', () => {
        const { productId, price } = btn.dataset;
        document.getElementById('out').textContent = 'Product ' + productId + ' costs ' + price;
      });
    });
  </script>
</body>
</html>

data-product-id превращается в dataset.productId. Значения всегда возвращаются строками, поэтому перед арифметикой преобразуйте их через Number(). CSS тоже умеет выбирать по ним: [data-price="4.50"].

Частые ошибки

class написан дважды. <div class="a" class="b"> оставляет только a. Запишите оба в один атрибут: class="a b".
Повторный id. Два элемента с одинаковым id ломают ссылки вида #id, подписи и getElementById, который возвращает только первый. Для всего повторяющегося используйте класс.
disabled="false" или checked="false". Атрибут все еще есть, значит он включен. Удалите его.
Значения с пробелами без кавычек. alt=My photo задает alt равным My. Берите в кавычки каждое значение.
Придуманные атрибуты без data-. <div price="4"> некорректный HTML, и он может конфликтовать с будущим стандартным атрибутом. Используйте data-price.

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

Что такое атрибут HTML?

Атрибут это дополнительная информация внутри открывающего тега в виде name="value". Он настраивает элемент: href задает, куда ведет ссылка, src и alt описывают картинку, class и id позволяют CSS и JavaScript найти элемент.

Чем class отличается от id в HTML?

id должен быть уникальным на странице и обозначает один элемент, для ссылок #fragment, <label for> и getElementById. class может быть у многих элементов, а у одного элемента может быть несколько классов через пробел. Для стилей используйте классы.

Как добавить элементу несколько классов?

Запишите их в один атрибут class через пробел: <div class="card featured dark">. Если написать class дважды, это не сработает: браузер оставит только первый.

Нужны ли кавычки в атрибутах HTML?

Кавычки необязательны, если в значении нет пробелов и специальных символов, но надежнее ставить их всегда. class=big box дает элементу класс big и отдельный атрибут с именем box.

Почему кнопка с disabled="false" все равно неактивна?

disabled это логический атрибут: его наличие означает true, что бы ни было написано в значении. Чтобы включить элемент, удалите атрибут или выполните в JavaScript button.disabled = false, что его и удаляет.

Можно ли придумать свои атрибуты HTML?

Используйте префикс data-: data-price="12" или data-user-id="7" допустимы у любого элемента, а в JavaScript они доступны через element.dataset. Придуманные имена без префикса делают HTML некорректным.

Связанные концепции