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

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-element-a-with-the-attribute-href-must-not-appear-as-a-descendant-of-the-a-element
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

An `<a>` element with an `href` attribute is interactive content, and interactive content cannot appear inside another `<a>` element.

The `href` attribute is what triggers this error. A link that points somewhere is interactive, and the HTML specification does not allow one interactive element to contain another. The outer `<a>` is already interactive, so a second linked `<a>` nested anywhere inside it, even several elements deep, makes the markup invalid. An `<a>` without `href` is just a placeholder and is allowed inside a link, which is why the validator names the attribute explicitly.

When links overlap like this, browsers cannot tell which destination a click should follow, and most will silently close the outer link before the inner one, producing a DOM that no longer matches your source. Screen readers run into the same ambiguity and may announce the wrong link or skip one entirely.

The fix is to give each link its own space so that no `<a href>` sits inside another `<a href>`.

## Invalid example

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

## Valid example

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