# HTML Button Nesting Causes Hydration Errors

In HTML, `<button>` cannot be a descendant of another `<button>`. Browsers silently restructure the DOM when they encounter this, but React's server-rendered HTML does not match the browser's restructured DOM, causing a hydration mismatch.

```tsx
// BAD: nested button causes hydration error
<button onClick={openMenu}>
  <Icon />
  {isOpen && (
    <div className="submenu">
      <button onClick={selectOption}>Option A</button>  {/* nested! */}
    </div>
  )}
</button>
```

```tsx
// GOOD: move submenu outside the button, wrap both in a div
<div onMouseEnter={showMenu} onMouseLeave={hideMenu}>
  <button onClick={openMenu}>
    <Icon />
  </button>
  {isOpen && (
    <div className="submenu">
      <button onClick={selectOption}>Option A</button>
    </div>
  )}
</div>
```

The error message in Next.js dev mode is: `In HTML, <button> cannot be a descendant of <button>. This will cause a hydration error.`

This also applies to `<a>` inside `<a>`, `<form>` inside `<form>`, and other elements with restrictions defined in the [HTML spec's content model](https://html.spec.whatwg.org/multipage/dom.html#content-models).