skip to main content

<legend>

html

Кратко 🔗

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

Пример 🔗

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

</fieldset>

Как это понять 🔗

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

Как пишется 🔗

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

</fieldset>

See the Pen rotate legend by Roman Ganin (@Realetive) on CodePen.

Атрибуты 🔗

У <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
Windows 8, Internet Explorer 10.0
Windows 8, Internet Explorer 10.0
Windows 7, Internet Explorer 9.0
Windows 7, Internet Explorer 9.0
Samsung Galaxy S7
Samsung Galaxy S7
Google Nexus 6
Google Nexus 6

В работе 🔗

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

See the Pen legend align by Roman Ganin (@Realetive) on CodePen.

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

See the Pen <legend> by Roman Ganin (@Realetive) on CodePen.