The element “a” with the attribute “href” must not appear as a descendant of the “button” element.

An <a> element cannot be placed inside a <button> element because interactive content must not be nested within other interactive content.

The HTML specification forbids nesting clickable elements inside other clickable elements. Both <a> and <button> are interactive content, meaning they each expect to receive user interaction independently. When you nest one inside the other, browsers can’t determine which element should handle the click, leading to unpredictable behavior and accessibility problems.

Screen readers and keyboard navigation also struggle with nested interactive elements. A user tabbing through the page may not be able to reach or activate the inner link, or may trigger the wrong action entirely.

To fix this, you have two main options: use a styled <a> element that looks like a button, or use a <button> with JavaScript to handle navigation.

Invalid Example

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

Fixed Examples

Option 1: Style the link as a button

This is the preferred approach when the purpose is navigation.

<a href="/dashboard" class="btn">Go to Dashboard</a>

<style>
  .btn {
    display: inline-block;
    padding: 8px 16px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    border: none;
    cursor: pointer;
  }
</style>

Option 2: Use a button with JavaScript

This works when you need button semantics but also want navigation.

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

Option 1 is generally better for navigation because <a> elements communicate the correct intent to assistive technologies and allow standard browser behaviors like right-click “Open in new tab.”

Learn more:

MDN Reference

HTML button element

→

MDN Reference

HTML anchor element

→

WHATWG Spec

HTML Standard - Form elements

→