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

The HTML specification defines <a> elements as having a transparent content model, but with specific exceptions — most notably, they must not contain interactive content, which includes other <a> elements. This means you can never legally nest one link inside another, regardless of how deeply nested or how the markup is structured.

This error most commonly occurs for one of two reasons:

1. A missing closing tag: You forgot to close a previous <a> element with </a>, so the browser (and the validator) considers the next <a> tag to be nested inside the still-open one.
2. Intentionally nested links: You tried to place a link inside another link, perhaps to create a card component where both the card and an inner element are clickable.

Why this matters

• Unpredictable browser behavior: When browsers encounter nested <a> elements, they attempt to fix the invalid markup using error-recovery algorithms, but different browsers may handle it differently. This can lead to broken links, missing content, or unexpected DOM structures.
• Accessibility issues: Screen readers and other assistive technologies rely on a well-formed DOM. Nested links create confusing navigation — a user tabbing through links may encounter unexpected behavior or miss content entirely.
• Standards compliance: The WHATWG HTML specification explicitly states that <a> elements must not have interactive content descendants, including other <a> elements.

Examples

Missing closing tag (most common cause)

The most frequent trigger is simply forgetting to close an <a> tag. The validator sees the second <a> as being inside the first:

<!-- ❌ Bad: first <a> is never closed -->

<nav>
  <a href="one.html">Page 1
  <a href="two.html">Page 2</a>
</nav>

Add the missing </a> to fix it:

<!-- ✅ Good: both <a> elements are properly closed -->

<nav>
  <a href="one.html">Page 1</a>
  <a href="two.html">Page 2</a>
</nav>

Intentionally nested links

Sometimes developers try to nest links when building clickable card components:

<!-- ❌ Bad: <a> nested inside another <a> -->

<a href="/article" class="card">
  <h2>Article Title</h2>
  <p>A short description of the article.</p>
  <a href="/author">Author Name</a>
</a>

There are several valid approaches to fix this. One common pattern is to make the card a non-link container and use CSS to stretch the primary link over the entire card:

<!-- ✅ Good: no nested links, card is still fully clickable -->

<div class="card">
  <h2><a href="/article" class="card-link">Article Title</a></h2>
  <p>A short description of the article.</p>
  <a href="/author">Author Name</a>
</div>

.card {
  position: relative;
}

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

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

This technique uses a pseudo-element to expand the primary link’s clickable area over the entire card, while the secondary link (Author Name) sits above it via z-index, remaining independently clickable.

Links wrapping block-level content

In HTML5, <a> elements can wrap block-level elements like <div> and <h2>, which is perfectly valid. Just make sure you don’t accidentally nest another <a> inside:

<!-- ✅ Good: <a> wrapping block content with no nested links -->

<a href="/article">
  <div class="card">
    <h2>Article Title</h2>
    <p>A short description of the article.</p>
  </div>
</a>

Quick checklist

• Search your HTML for every <a tag and verify it has a corresponding </a>.
• If you’re generating HTML dynamically (with a CMS, templating engine, or JavaScript), check that your template logic doesn’t produce unclosed or nested anchors.
• If you need multiple clickable areas within a single component, use the CSS pseudo-element overlay technique shown above instead of nesting links.

Learn more:

MDN Reference

HTML a element - MDN Web Docs

→

WHATWG Spec

HTML text-level semantics - WHATWG

→

MDN Reference

Content categories - MDN Web Docs

→