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

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)

<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)

<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

<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:

<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>:

<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.

Learn more:

MDN Reference

HTML button element

→

WHATWG Spec

The button element - WHATWG HTML Standard

→

web.dev Article

HTML forms guide

→