<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!

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

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

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

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

Скопировано
Задать вопрос в рубрику
🤚 Я знаю ответ

Матвей Романов  отвечает

Скопировано

Элемент <legend> используется для создания группового заголовка или подписи элементов внутри <fieldset>. Он помогает описать или идентифицировать группу элементов в форме. С точки зрения доступности использование <legend> может быть полезным для сценариев чтения с экрана, поскольку он явно связывает группу элементов с их заголовком.

Элемент <caption> используется для создания заголовка таблицы <table>. Он помещается перед телом таблицы и предоставляет описание или общую информацию о таблице. Относительно доступности элемент <caption> помогает пользователям понять содержание и контекст таблицы, что особенно важно для людей, использующих скринридеры.

Элемент <label> используется для связывания подписи с элементом формы — <input>, <select> или <textarea>. Он помогает пользователю понять, какому полю ввода принадлежит текст подписи. С точки зрения доступности использование элемента <label> позволяет пользователям использовать элементы формы без необходимости точного наведения на соответствующее поле ввода и повышает удобство использования для людей с инвалидностью.

Таким образом, сходство между этими элементами заключается в том, что все они предоставляют текстовое содержимое, которое помогает описывать, идентифицировать или связывать элементы в HTML-документе. Однако каждый элемент имеет свою специфическую функциональность и применение, относящиеся к разным компонентам HTML-структуры.