# Start tag “button” seen but an element of the same type was already open.

> Canonical HTML version: https://rocketvalidator.com/html-validation/start-tag-button-seen-but-an-element-of-the-same-type-was-already-open
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The HTML specification explicitly forbids nesting interactive content inside a `<button>` element. This means a `<button>` cannot contain another `<button>`, nor can it contain elements like `<a>`, `<input>`, `<select>`, `<textarea>`, or any other interactive element. The `<button>` element's content model allows phrasing content, but specifically excludes interactive content.

The most common cause of this error is a missing `</button>` closing tag. When you forget to close a button, the parser considers everything that follows — including the next `<button>` start tag — as being inside the first button. This creates an invalid nesting situation even though you likely intended the buttons to be siblings.

This matters for several reasons:

- **Accessibility:** Screen readers and assistive technologies rely on proper document structure. A button nested inside another button creates a confusing interaction model — which button does the user activate when they click or press Enter?
- **Browser behavior:** Browsers handle this invalid markup inconsistently. Some may ignore the inner button, while others may attempt error recovery in unpredictable ways, leading to broken functionality.
- **Standards compliance:** Invalid HTML can interfere with JavaScript event handling, CSS styling, and overall page reliability.

## Examples

### Missing closing tag (triggers the error)

```html
<button>Submit
<button>Cancel</button>
```

Here, the first `<button>` is never closed, so the parser sees the second `<button>` as being nested inside it.

### Intentionally nested buttons (triggers the error)

```html
<button class="card">
  <span>Select this plan</span>
  <button class="details">More info</button>
</button>
```

Even if this nesting is intentional, it is invalid HTML. A `<button>` cannot contain another `<button>`.

### Fix: Close each button properly

```html
<button>Submit</button>
<button>Cancel</button>
```

Adding the missing `</button>` tag makes the two buttons proper siblings.

### Fix: Restructure nested interactive elements

If you need a clickable card with an additional action inside it, separate the interactive elements rather than nesting them:

```html
<div class="card">
  <button class="select">Select this plan</button>
  <button class="details">More info</button>
</div>
```

### Fix: Use non-interactive elements for styling purposes

If the inner element was only meant for visual grouping, use a `<span>` or other phrasing element instead of a `<button>`:

```html
<button class="card">
  <span class="label">Select this plan</span>
  <span class="sublabel">Best value</span>
</button>
```

This keeps a single interactive `<button>` while using non-interactive `<span>` elements for internal structure and styling.