# The element “label” must not appear as a descendant of the “button” element.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-element-label-must-not-appear-as-a-descendant-of-the-button-element
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `<label>` element serves a specific purpose in HTML: it represents a caption for a form control. It can be associated with a control either through the `for` attribute (referencing the control's `id`) or by wrapping the form control inside the `<label>` itself. Placing a `<label>` inside a `<button>` is semantically incorrect because a button is not a form control that benefits from labeling in this way — the button's own text content or `aria-label` attribute already serves as its accessible name.

The HTML specification defines the content model of `<button>` as phrasing content, but explicitly excludes interactive content. Since `<label>` is classified as interactive content (it directs focus to its associated control when clicked), nesting it inside a `<button>` creates ambiguous behavior. When a user clicks the label, should it activate the button, or should it shift focus to the label's associated control? Browsers handle this conflict inconsistently, which leads to unpredictable user experiences.

From an accessibility standpoint, this nesting is problematic because screen readers may announce the button in a confusing way, potentially reading it as containing a label for another element. The button's accessible name should come directly from its text content, not from a nested `<label>`.

To fix this issue, simply replace the `<label>` with a `<span>` or plain text inside the button. If you need to style part of the button's text differently, `<span>` elements are perfectly valid inside buttons.

## Examples

### ❌ Invalid: `<label>` inside a `<button>`

```html
<button type="submit">
  <label>Submit Form</label>
</button>
```

### ❌ Invalid: `<label>` with a `for` attribute inside a `<button>`

```html
<button type="button">
  <label for="file-input">Choose File</label>
</button>
<input type="file" id="file-input">
```

### ✅ Fixed: Use plain text inside the `<button>`

```html
<button type="submit">
  Submit Form
</button>
```

### ✅ Fixed: Use a `<span>` for styling purposes

```html
<button type="submit">
  <span class="button-text">Submit Form</span>
</button>
```

### ✅ Fixed: Separate the `<label>` and `<button>`

If you need a label to describe a button's purpose in a form, place the `<label>` outside the button and use the `for` attribute to associate it with a related input, or use `aria-label` on the button itself:

```html
<label for="username">Username</label>
<input type="text" id="username">
<button type="submit" aria-label="Submit the username form">
  Submit
</button>
```