<legend>: The Field Set Legend element #

::: section-content The <legend> HTML element represents a caption for the content of its parent <fieldset>. :::

Try it #

::: section-content ::: iframe ::: {.output-header .border-rounded-top}

HTML Demo: <legend> #

Reset :::

::: {#warning-no-script .warning-container} ::: warning The interactive example cannot be shown because JavaScript is disabled. ::: :::

::: {#warning-mathml-not-supported .warning-container .hidden} ::: warning The interactive example cannot be shown because MathML is not supported by your browser. ::: :::

::: {#editor-container .editor-container .tabbed-standard .hidden .border-rounded-bottom editor-type=“tabbed”} ::: {#tab-container .section .tabs} ::: {#tablist .tab-list role=“tablist”} HTML

CSS

JavaScript :::

::: {#html-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“html” aria-hidden=“true”} ::: {#html-editor}

Choose your favorite monster

  <input type="radio" id="kraken" name="monster" value="K" />
  <label for="kraken">Kraken</label><br />

  <input type="radio" id="sasquatch" name="monster" value="S" />
  <label for="sasquatch">Sasquatch</label><br />

  <input type="radio" id="mothman" name="monster" value="M" />
  <label for="mothman">Mothman</label>
</fieldset>

::: :::

::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”} ::: {#css-editor} legend { background-color: #000; color: #fff; padding: 3px 6px; }

input {
  margin: 0.4rem;
}

::: :::

::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”} ::: {#js-editor} ::: ::: :::

::: {#output .output-container}

Output #

::: :::

::: {.section .console-container .hidden aria-hidden=“true”}

Console Output #

![] clear console

::: {#console .console} ::: :::

::: {#html-output .output .editor-tabbed} %html-content% ::: ::: :::

Attributes #

::: section-content This element only includes the global attributes. :::

Examples #

::: section-content See <form> for examples on <legend>. :::

Technical summary #

::: section-content

Content categories	None.
Permitted content	Phrasing content and headings (h1–h6 elements).
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	A `<fieldset>` whose first child is this `<legend>` element
Implicit ARIA role	No corresponding role
Permitted ARIA roles	No `role` permitted
DOM interface	`HTMLLegendElement`

:::

Specifications #

::: _table #

Specification #

HTML Standard
[# the-legend-element]{.small}

:::

Browser compatibility #

::: _table Desktop Mobile

         Chrome    Edge   Firefox   Internet Explorer   Opera   Safari   WebView Android   Chrome Android   Firefox for Android   Opera Android   Safari on IOS   Samsung Internet

legend 1 12 1 6 ≤12.1 3 4.4 18 4 ≤12.1 1 1.0 align 1 12 1 6 ≤12.1 ≤4 4.4 18 4 ≤12.1 ≤3.2 1.0 :::

<legend>: The Field Set Legend element #

Try it #

HTML Demo: <legend> #

Output #

Console Output #

Attributes #

Examples #

Technical summary #

Specifications #

::: _table #

Specification #

Browser compatibility #

See also #