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

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-element-a-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 HTML specification defines the `<button>` element's content model as "phrasing content" but explicitly excludes **interactive content**. Since the `<a>` element (when it has an `href` attribute) is classified as interactive content, nesting it inside a `<button>` violates this rule. The same restriction applies to any element that has `role="button"`, as it semantically functions as a button.

This is problematic for several reasons:

- **Accessibility:** Screen readers and assistive technologies cannot reliably convey the purpose of nested interactive elements. A user tabbing through the page may encounter confusing or duplicate focus targets, and the intended action becomes ambiguous.
- **Unpredictable behavior:** Browsers handle nested interactive elements inconsistently. Clicking the link inside a button might trigger the button's click handler, the link's navigation, both, or neither — depending on the browser.
- **Standards compliance:** The HTML specification forbids this nesting to ensure a clear, unambiguous interaction model for all users and user agents.

To fix this, decide what the element should do. If it navigates to a URL, use an `<a>` element (styled as a button if needed). If it performs an action like submitting a form or toggling something, use a `<button>`. If you need both behaviors, handle navigation programmatically via JavaScript on a `<button>`, or separate them into two distinct elements.

## Examples

### ❌ Incorrect: link nested inside a button

```html
<button>
  <a href="/dashboard">Go to Dashboard</a>
</button>
```

### ❌ Incorrect: link inside an element with `role="button"`

```html
<div role="button">
  <a href="/settings">Settings</a>
</div>
```

### ✅ Correct: use an anchor styled as a button

If the goal is navigation, use an `<a>` element and style it to look like a button with CSS:

```html
<a href="/dashboard" class="button">Go to Dashboard</a>
```

```css
.button {
  display: inline-block;
  padding: 8px 16px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
}
```

### ✅ Correct: use a button with JavaScript navigation

If you need button semantics but also want to navigate, handle the navigation in JavaScript:

```html
<button type="button" onclick="location.href='/dashboard'">
  Go to Dashboard
</button>
```

### ✅ Correct: separate the two elements

If both a button action and a link are genuinely needed, place them side by side:

```html
<button type="button">Save</button>
<a href="/dashboard">Go to Dashboard</a>
```

### ✅ Correct: link without `href` inside a button (edge case)

An `<a>` element without an `href` attribute is **not** interactive content, so it is technically valid inside a `<button>`. However, this is rarely useful in practice:

```html
<button type="button">
  <a>Label text</a>
</button>
```

As a general rule, never nest one clickable element inside another. This applies not only to `<a>` inside `<button>`, but also to other combinations like `<button>` inside `<a>`, or `<a>` inside `<a>`. Keeping interactive elements separate ensures predictable behavior and a good experience for all users.