<legend>

Добавляет заголовок полям ввода, сгруппированным при помощи <fieldset>.

Время чтения: меньше 5 мин

Кратко

Скопировано

Добавляет заголовок в <fieldset>, который по умолчанию оформляется браузером как текст, органично вписанный в рамку.

Пример

Скопировано
        
          
          <fieldset>  <legend>Заголовок для группы контролов</legend></fieldset>
          <fieldset>
  <legend>Заголовок для группы контролов</legend></fieldset>

        
        
          
        
      

Как понять

Скопировано

<legend> позволяет описать содержимое <fieldset>, но семантически он не является «представителем» заголовков, хотя выполняет схожую функцию. Он не задаёт иерархию, а лишь характеризует контент внутри «своей» группы — как <label> для соответствующего контрола.

Как пишется

Скопировано
        
          
          <fieldset>  <legend>Заголовок для группы</legend></fieldset>
          <fieldset>
  <legend>Заголовок для группы</legend></fieldset>

        
        
          
        
      
Открыть демо в новой вкладке

Атрибуты

Скопировано

У <legend> нет никаких своих атрибутов, ему доступны все глобальные атрибуты.

Подсказки

Скопировано

Внешний вид оформления рамки по умолчанию у <legend> немного отличается в зависимости от браузера и операционной системы:

Windows 10, Google Chrome 71.0
Windows 10, Google Chrome 71.0
macOS Big Sur, Google Chrome 71.0
macOS Big Sur, Google Chrome 71.0
Windows 10, Edge 18.0
Windows 10, Edge 18.0
macOS Big Sur, Safari 14.0
macOS Big Sur, Safari 14.0
Samsung Galaxy S7
Samsung Galaxy S7
Google Nexus 6
Google Nexus 6

На практике

Скопировано

Realetive советует

Скопировано

🛠 Для выравнивания положения текста часто советуют использовать атрибут align, но он исключён из современной спецификации, а привычные CSS-правила, например, с text-align: center с <legend> работать не будут, т. к. у него блочный контекст, но уникальная строчно-блочная контекстная модель содержимого, которая и создаёт неповторимую обводку от <fieldset>. Поэтому для выравнивания <legend> относительно ширины <fieldset> нужно использовать… внезапно margin!

Открыть демо в новой вкладке

За счёт особой формы обтекания рамкой текста, это можно использовать для характерной стилизации блока и заголовка:

Открыть демо в новой вкладке

На собеседовании

Скопировано

Это партнёрская рубрика, мы выпускаем её совместно с сервисом онлайн-образования Яндекс Практикум. Приносите вопрос, на который не знаете ответа, в задачи, мы разложим всё по полочкам и опубликуем. Если знаете ответ, присылайте пулреквест на GitHub.

Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.