HTML <label> Tag

By Jonathan Griffin. Editor, SEO Consultant, & Developer.

· 2 min read


The <label> tag creates a caption for an item in a form or user interface.


<p>Which of these is your favorite?</p>
    <label for="rocky1">Rocky? </label>
    <input type="checkbox" name="rocky1" id="rocky1">
    <label for="rocky4">Rocky IV? </label>
    <input type="checkbox" name="rocky4" id="rocky4">

Which of these is your favorite?


  • Both the opening and closing tags are required.
  • A <label> element can’t be a descendant of another <label> element.
  • The only descendant allowed is the labeled control. For example:
    <label for="rocky"><input type="checkbox" id="rocky" name="rocky"> Rocky</label>


The <label> element supports the Global Attributes, as well as the following:

  • for

    The for attribute specifies the id attribute of the form element that the label is bound to. This allows you to activate the control when the label is clicked.

  • form

    The form attribute specifies which form the label belongs to.

Best Practices

  • Do not place heading elements within a <label> element as they can interfere with assistive technology such as screen readers. If a form or section of a form requires a title you should use a <legend> tag.
  • Do associate a label with an <input> element with type=button as this can interfere with assistive technology such as screen readers.
  • Do not place anchors or buttons inside a label as this makes it difficult to active the form input via the <label>.
  • Be sure to correctly use the for attribute to ensure that clicking the label activates the control.


Browser Support




Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet