Are you allowed to nest a link inside of a link?

javascript

clickable-areas

css-positioning

event-handling

byNikita Barsukov·Jan 12, 2025

Nesting an <a> element within another <a> element is non-compliant with HTML5 standards. HTML specs categorically prohibit interactive content, including other <a> tags, within an <a> tag. Browser interpretations of nested links can be unpredictable, so avoid this. Opt for using JavaScript for complex click actions, or structure your HTML using neighboring links.

Consider this example of neighborly, non-nested links with JavaScript managing the actions:

<div onclick="location.href='http://example1.com';" style="cursor: pointer;">
  Go to Example1
  <span onclick="event.stopPropagation(); location.href='http://example2.com';">Go to Example2</span>
  <!-- because who doesn't love a good neighbor? -->
</div>

With the span's onclick, we can stop the event from trickling up and ensure the destination is precisely where we intend it to be.

JavaScript and CSS: making clicks count

Facing a predicament to pseudo-nest links? JavaScript and CSS are your knights in shining armor. You can fabricate clickable areas using block elements and absolute positioning in CSS, thereby sustaining usability and an uncluttered structure.

Take a look at the following examples:

Block elements and CSS: Create separate clickable spots using block elements which may overlap visually but not structurally in the HTML framework.

<div class="link-container">
  <a href="http://example1.com" class="main-link">Main Link Area</a>
  <div class="overlay">
    <a href="http://example2.com" class="nested-link">Nested Link Area</a>
  </div>
</div>
<!-- just like good friends, always there, never in the way -->

Pointer-events: Deploy pointer-events: all to ensure all links stay clickable, even when it seems like they're nesting.
Event handling: Design JavaScript functions to manage click events, ensuring to restrain any default action to stop event propagation and make sure the intended action goes ahead.

Shaping user-friendly elements and accessibility

Pay utmost attention to user experience and accessibility when crafting the UI design. Here's how you can go about it:

HTML semantics

Adopt simple HTML structures to bring about clarity and improve accessibility. Make use of non-link entities like <div> or <span> tags, which can be made clickable.

Keeping the user in mind

Design every aspect with the user in mind. When handling complex JavaScript interactions, document your code exhaustively for the sake of clarity and maintainability.

Work around with object tag

In scenarios where you're cornered into thinking that nesting links is your only way out, consider the object tag. This can act as a multi-house for several independent links, and still play by the rules of HTML.

Catering to accessibility

Make sure interactive elements are keyboard accessible and compatible with screen readers. Add aria attributes and roles to give a comprehensive description of the nature and state of UI components.

Innovative solutions for avoiding pitfalls

Having to deal with restrictions in web standards such as nested links could pave the way for creative workarounds. Here's a couple for you:

Layered links with absolute positioning

With absolute positioning, you can simulate nested appearance using CSS while maintaining a clean, non-nested HTML structure.

<div class="link-wrapper" style="position: relative;">
  <a href="http://example1.com">Link 1</a>
  <a href="http://example2.com" style="position: absolute; top: 10px; left: 10px;">Link 2</a>
</div>
<!-- because it's hip to be square but even cooler to be relative -->

Div elements go interactive

Turn <div> tags into clickable spaces using onclick events, thus dancing around the need for nested anchors:

<div onclick="window.location.href='http://example1.com';">Clickable area representing link 1</div>

Handling events with jQuery

Get your hands on jQuery to handle events on nested elements in a more clean and organized manner.

$(".outer-link").on("click", function() {
  // Outer link action
});

$(".inner-link").on("click", function(event) {
  event.stopPropagation();
  // Inner link action
});
// remember: advice is like jQuery, a great source of handling events -->