<legend> captions the contents of a fieldset. Put it as the fieldset’s first child so the group’s question is available before its choices.
A working example
HTML and CSS
HTML
<fieldset>
<legend>Which topics should we include?</legend>
<label><input type="checkbox" name="topic" value="html" /> HTML</label
><label><input type="checkbox" name="topic" value="css" /> CSS</label>
</fieldset>CSS
/* Optional presentation */
label {
display: block;
margin: 0.75rem 0 0.25rem;
}
input,
select,
textarea,
button {
font: inherit;
max-width: 100%;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Use it in a form
The legend names the group, while each label names a choice. Keep it short enough to make sense when assistive technology announces the group and an individual choice together.
Common mistakes and accessibility
A legend does not label each input on its own. Do not use a styled paragraph as a substitute when you need fieldset semantics. New customizable select features also permit legend within optgroup; their support is separate from this conventional fieldset use.
Continue with fieldset for the related behavior.
Sources and browser support
MDN: legend describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.