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

The HTML living standard defines the content model of the <a> element as “transparent,” meaning it can contain whatever its parent element allows — with one critical exception: it must not contain any interactive content, which includes other <a> elements, <button>, <input>, <select>, <textarea>, and similar elements. This restriction exists at every level of nesting, not just direct children. If an <a> appears anywhere inside another <a>, even deeply nested within <div> or <span> elements, the markup is invalid.

Why This Is a Problem

Unpredictable browser behavior: When browsers encounter nested anchors, they don’t agree on how to handle them. Most browsers will attempt to “fix” the invalid markup by automatically closing the outer <a> before opening the inner one, but the resulting DOM structure may not match your intentions at all. This means your page layout, styling, and link targets can all break in unexpected ways.

Accessibility failures: Screen readers rely on the DOM tree to announce links to users. Nested anchors create ambiguous link boundaries — assistive technology may announce the wrong link text, skip links entirely, or confuse users about which link they’re activating. Keyboard navigation can also become unreliable, since tab order depends on a well-formed link structure.

Broken click targets: When links overlap, it’s unclear which link should activate when a user clicks the shared area. This results in a poor user experience where clicks may navigate to the wrong destination.

Common Causes

This error often arises in a few typical scenarios:

• Card components where the entire card is wrapped in an <a>, but individual elements inside (like a title or button) also need their own links.
• Navigation menus generated by CMS platforms or templating systems that accidentally produce nested link structures.
• Copy-paste mistakes where anchor tags get duplicated during content editing.

How to Fix It

The core fix is straightforward: ensure no <a> element exists as a descendant of another <a> element. Depending on your situation, you can:

1. Separate the links so they are siblings rather than nested.
2. Remove the outer link if only the inner link is needed.
3. Use CSS and JavaScript for card-style patterns where the entire container needs to be clickable but inner links must remain independent.

Examples

Incorrect: Nested Anchors

<a href="/products">
  Browse our <a href="/products/new">new arrivals</a> today
</a>

This is invalid because the inner <a> is a descendant of the outer <a>.

Fix: Separate the Links

<p>
  <a href="/products">Browse our products</a> or check out our
  <a href="/products/new">new arrivals</a> today.
</p>

Incorrect: Clickable Card with a Nested Link

<a href="/post/123" class="card">
  <h2><a href="/post/123">Article Title</a></h2>
  <p>A brief summary of the article content.</p>
</a>

Fix: Remove the Redundant Inner Link

If both links point to the same destination, simply remove the inner one:

<a href="/post/123" class="card">
  <h2>Article Title</h2>
  <p>A brief summary of the article content.</p>
</a>

Fix: Card with Multiple Distinct Links

When a card needs an overall clickable area and independent inner links, avoid wrapping everything in an <a>. Instead, use CSS positioning to stretch the primary link over the card:

<div class="card">
  <h2><a href="/post/123" class="card-link">Article Title</a></h2>
  <p>A brief summary of the article content.</p>
  <p>Published by <a href="/author/jane">Jane Doe</a></p>
</div>

.card {
  position: relative;
}

.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card a:not(.card-link) {
  position: relative;
  z-index: 1;
}

This approach makes the entire card clickable via the stretched ::after pseudo-element on the primary link, while the author link remains independently clickable above it — all without nesting any <a> elements.

Incorrect: Deeply Nested Anchor

The restriction applies at any depth, not just direct children:

<a href="/page">
  <div>
    <span>
      <a href="/other">Nested link</a>
    </span>
  </div>
</a>

Fix: Restructure to Avoid Nesting

<div>
  <a href="/page">Main page link</a>
  <span>
    <a href="/other">Other link</a>
  </span>
</div>

Always verify that your final markup contains no <a> element inside another <a>, regardless of how many elements sit between them. Running your HTML through the W3C validator after making changes will confirm the issue is resolved.

Find issues like this automatically

Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.

Start Free Trial See Pricing