# End tag “a” violates nesting rules.

> Canonical HTML version: https://rocketvalidator.com/html-validation/end-tag-a-violates-nesting-rules
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The HTML specification explicitly forbids nesting `<a>` elements inside other `<a>` elements. This is defined as part of the content model for the `<a>` element — it is "transparent" but must not contain any interactive content, which includes other `<a>` elements. When the validator encounters a closing `</a>` tag that would violate these nesting rules, it raises this error.

This typically happens in one of two scenarios:

1. **A missing closing `</a>` tag** — You forget to close one link, so the next link appears to be nested inside it.
2. **Intentionally wrapping one link inside another** — You try to place a clickable link inside a larger clickable area, which is invalid HTML.

### Why this matters

When an `<a>` element is nested inside another `<a>` element, browsers must guess what you intended. Different browsers may handle this differently — some will auto-close the first link before starting the second, while others may produce unexpected DOM structures. This leads to:

- **Unpredictable behavior** — Click targets may not work as expected across different browsers.
- **Accessibility issues** — Screen readers rely on a well-structured DOM. Ambiguous nesting confuses assistive technologies and makes navigation difficult for users who depend on them.
- **Broken styling** — CSS selectors that depend on proper parent-child relationships may not apply correctly.

### How to fix it

1. **Find the offending `<a>` tags** — The validator will point to the line with the problematic closing `</a>`. Look at that line and the lines above it to find where the nesting issue begins.
2. **Add missing closing tags** — If you forgot a `</a>`, add it before the next `<a>` opens.
3. **Restructure if needed** — If you intended to have a link inside a larger clickable area, redesign the markup so that the links are siblings rather than nested.

## Examples

### ❌ Missing closing tag causes implicit nesting

The first `<a>` is never closed, so the second `<a>` appears to be nested inside it:

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

### ✅ Fixed by adding the missing closing tag

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

### ❌ Intentionally nesting links (invalid)

Wrapping a link inside a larger link is not allowed, even if it seems useful for UI purposes:

```html
<a href="/article">
  <h2>Article Title</h2>
  <p>A short summary of the article.</p>
  <a href="/author">Author Name</a>
</a>
```

### ✅ Fixed by restructuring with sibling links

Use CSS positioning or a different layout strategy to achieve the same visual result without nesting:

```html
<article>
  <a href="/article">
    <h2>Article Title</h2>
    <p>A short summary of the article.</p>
  </a>
  <p>By <a href="/author">Author Name</a></p>
</article>
```

### ❌ Forgetting to close links in a list

This is especially common in navigation menus built with lists:

```html
<ul>
  <li><a href="/home">Home</li>
  <li><a href="/about">About</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>
```

Here, the first `<a>` is never closed. The `</li>` tag implicitly closes the `<li>`, but the `<a>` remains open, causing nesting issues with the subsequent links.

### ✅ Fixed by properly closing each link

```html
<ul>
  <li><a href="/home">Home</a></li>
  <li><a href="/about">About</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>
```

A good habit is to write both the opening and closing `<a>` tags together before filling in the content. This prevents accidental omission and keeps your HTML well-structured.