---
title: How to implement a nested a tags?
url: https://calvin.my/posts/how-to-implement-a-nested-a-tags
published: 2024-07-29
updated: 2026-09-16
category: Development
tags:
- html
- Javascript
- dom
summary: The post explains how to make an entire blog-post card clickable while allowing tag buttons inside it to navigate separately. Nested links are invalid HTML, and browsers restructure them, limiting the parent link’s clickable area. Replacing links with click handlers creates an event-bubbling conflict when tag clicks also trigger the card action. Stopping propagation on tag interactions resolves this, with a framework-specific option available for Stimulus.
---

# How to implement a nested a tags?

## The requirements

I wanted to put some buttons on each of the blog posts.

- When clicking on the buttons (#2 in the screenshot), it goes to the tagging URL
- When clicking on everywhere else (#1 in the screenshot), it goes to the blog post URL

![](https://camy-pub.s3.ap-southeast-1.amazonaws.com/0ec29e18-8264-444d-bcfe-0fb2ed71029d.png)

## First Attempt

I first try to implement this using nested `<a>` tags. Pseudocode:

```html
<a href="https://google.com">
  <div>
   <h1>Title</h1>
    <a href="https://google.com/1">Feature 1</a>
    <a href="https://google.com/2">Feature 2</a>
    <p>Date</p>
  </div>
</a>
```

This doesn't seem to work as intended. The reason is that nested `<a>` tags are illegal in HTML standards.&nbsp;&nbsp;

Browsers such as Chrome will force the code above into something like below.

```html
<div><a href="https://google.com">
  <h1>Title</h1>
  </a>
  <a href="https://google.com/1">Feature 1</a>
  <a href="https://google.com/2">Feature 2</a>
  <p>Description</p>
</div>
```

I have to click on the h1 title to go to the blog page, not everywhere as per my requirement.

## Second Attempt

I then remove all `<a>` tags and bind `click` events to the respective DOMs.

```html
  <div data-url="https://google.com" class="post">
    <h1>Title</h1>
    <span data-url="https://google.com/1" class="tag">Feature 1</span>
    <span data-url="https://google.com/2" class="tag">Feature 2</span>
    <p>Description</p>
  </div>
```

```javascript
viewPost(e) {
    window.location.href = e.currentTarget.dataset.url
}

viewTag(e) {
    window.location.href = e.currentTarget.dataset.url
}
```

Both the buttons and the entire card are clickable. But I have one problem. When I click on the tag buttons, it triggers both URLs, and I will end up on the wrong page.

The reason is, that the click event on the tag buttons got propagated to its parent, which is listening to the same event.

## Third Attempt

To prevent this, we need to stop the propagation.

```javascript
viewPost(e) {
    window.location.href = e.currentTarget.dataset.url
}

viewTag(e) {
    e.stopPropagation()
    window.location.href = e.currentTarget.dataset.url
}
```

It is now working as per our requirements.

* * *

## Stimulus equivalent

If you are using stimulus, this can be done by adding a "stop" option in your action. Example:

```html
<span data-action="click->posts#viewTag:stop"></span>
```