<legend>

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

На практике

Скопировать ссылку на секцию "На практике" Скопировано

Realetive советует

Скопировать ссылку на секцию "Realetive советует" Скопировано

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

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

+ Развернуть

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

Скопировать ссылку на секцию "На собеседовании" Скопировано

Задать вопрос в рубрику

🤚 Я знаю ответ

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