<label>
- 25 января 2023
Что делает тег
Тег <label>
связывает подпись элемента формы (<input>
, <textarea>
, <select>
) с самим элементом. Тег также улучшает доступность формы для пользователей, использующих программы чтения с экрана.
Использовать тег можно двумя способами:
- Добавить рядом с элементом формы. В таком случае
<label>
добавляется атрибутfor
, значением которого будет идентификатор соответствующего элемента формы. - Обернуть элемент формы в тег
<label>
.
Синтаксис тега <label>
Первый способ:
<label for="input-id">Метка</label>
<input type="text" id="input-id">>
Второй способ:
<label>Метка<input type="text"></label>
Спецификация HTML
Тег <label>
является частью спецификации HTML Living Standard.
Семантический или нет
Тег <label>
считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.
Примеры использования
Описание для поля ввода имени:
<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username">>
Описание для поля ввода почты:
<label for="email">Электронная почта:</label>
<input type="email" id="email" name="email">>
Описание для поля ввода адреса
<label>Адрес<input type="text" name="address"></label>
Для чего использовать тег <label>
- Чтобы связать подпись с элементом формы.
- Чтобы улучшить доступность формы для пользователей, использующих программы чтения с экрана.
Атрибуты тега <label>
for
— указывает, к какому элементу формы привязана подпись.
Глобальные атрибуты
Тег поддерживает все глобальные атрибуты HTML.
Ограничения
Для использования тега <label>
нет никаких ограничений.
Нюансы
Чтобы связать подпись с элементом формы, ID элемента должен совпадать со значением атрибута for
тега <label>
.
Поддержка браузерами
Тег поддерживается всеми современными браузерами. Актуальная информация — на сaniuse.
Альтернативные теги
Альтернативных тегов для тега <label>
не существует.
Чем заменить тег
Прямой замены тегу <label>
не существует.
Актуальность
Тег <label>
не устарел, можете использовать его в веб-разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023