<legend> - HTML-елемент для заголовка групи полів форми

HTML-елемент <legend> представляє собою заголовок для вмісту свого батьківського елемента <fieldset>.

Елемент <legend> надає семантичний заголовок для групи полів, об'єднаних за допомогою елемента <fieldset>. Це покращує доступність форм, оскільки екранні зчитувачі використовують <legend> для опису групи пов'язаних елементів керування.

<fieldset>
  <legend>Заголовок групи</legend>
  ...
</fieldset>

<form>
  <fieldset>
    <legend>Контактна інформація</legend>
    <div>
      <label for="name">Ім’я:</label>
      <input type="text" id="name" name="name">
    </div>
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email">
    </div>
  </fieldset>
</form>

fieldset {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 1rem;
}
legend {
  padding: 0 0.5rem;
  font-weight: bold;
}
div {
  margin-bottom: 0.5rem;
}

legend {
  display: block;
  padding-inline-start: 2px;
  padding-inline-end: 2px;
  border-width: initial;
  border-style: none;
  border-color: initial;
  border-image: initial;
}