CSS - Nested Anchor Tag Link

Why are nested anchor tags illegal?

Keep in mind that an anchor isn't just a link, it's also something to which one can link. (Though the former use is far more common than the latter.) Quoting W3C (old, but relevant):

An anchor is a piece of text which marks the beginning and/or the end of a hypertext link.

To that end, don't think of an anchor as a link. Think of it as a point in the document which connects to (and/or from) another point (in the same document or another document, it makes no difference). Two points in some non-physical space which are connected by a non-physical thread.

Given that, anchors shouldn't contain a lot of content. If it contains a lot of content, it ceases to become a "point" and starts to become an "area." For example, imagine an anchor which when rendered takes up more space than the browser can display at once. If something links to that anchor, where should it go? The beginning? Middle? End? (Intuitively you might think the beginning, but you get the idea.)

Furthermore, anchors definitely shouldn't contain other anchors. The non-physical connections between the non-physical points can become ambiguous. Does the child anchor connect to the other point, or does the parent anchor connect to the other point? This probably doesn't result in being a big deal in most cases, since the vast majority of anchors today are one-way links from the anchor to another document. But the purpose of the anchor is more than just a one-way link to another document, so the definition continues to embody that purpose.

CSS - nested anchor tag link

Use a SPAN, since you cannot nest anchor tags.

<a href="#">This is a link <span id="sup">sup text</span> end of the link</a>

Ok I'll use span, but how to make the span having the same propreties
than anchor tag when anchor tag is hover ?

Add the hover state to your CSS for the "sup" element.

a, a:hover #sup {
    font-family: Arial;
    color: #19578e;
    font-size: 10pt;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}

If you have this in more than on place, you can simply use:

a, a:hover span { ... }

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

Straight from the W3C for HTML4:

12.2.2 Nested links are illegal

Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.

Since the DTD defines the LINK element to be empty, LINK elements may not be nested either.

HTML 5

And for HTML5 it is a little different.

You cannot have Interactive Content inside an A element. Interactive Content includes anchor tags.

Creating anchor tag inside anchor tag

As @j08691 describes, nested a elements are forbidden in HTML syntax. HTML specifications do not say why; they just emphasize the rule.

On the practical side, browsers effectively enforce this restriction in their parsing rules, so unlike in many other issues, violating the specs just won’t work. The parsers effectively treat an <a> start tag inside an open a element as implicitly terminating the open element before starting a new one.

So if you write <a href=foo>foo <a href=bar>bar</a> zap</a>, you won’t get nested elements. Browsers will parse it as <a href=foo>foo</a> <a href=bar>bar</a> zap, i.e. as two consecutive links followed by some plain text.

There is nothing inherently illogical with nested a elements: they could be implemented so that clicking on “foo” or “zap” activates the outer link, clicking on “bar” activates the inner link. But I don’t see a reason to use such a structure, and the designers of HTML probably didn’t see one either, so they decided to forbid it and thereby simplify things.

(If you really wanted to simulate nested links, you could use a normal link as the outer link and a span element with a suitable event handler as the inner “link”. Alternatively, you could duplicate links: <a href=foo>foo</a> <a href=bar>bar</a> <a href=foo>zap</a>.)

nesting a link in a div, where that div is surrunded by a link

If you don't mind not having the content selectable inside your element, you could make an overlay that sits over top of the content that is itself an anchor. Position the parent as position: relative; and the child <a> overlay as position: absolute; top:0; bottom: 0; left: 0; right: 0;.

Just make sure the overlay is a sibling, not a parent, to your .inner-link anchor and that it comes before it.

Alternative to nested anchor tags

You could use CSS or JavaScript. I would recommend just using CSS.

CSS

This works in my Firefox using CSS only. Basically I just made all child links (except the big one) have position: relative and set their z-index to higher than the large background link.

HTML

<div>
    Hello, <a href="http://example.com/hello" class="normal">Bob</a>
    <a href="http://example.com" class="big"></a>
</div>

CSS

div {
    position: relative;
}

.big {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;   
  z-index: 0;
}

.normal {
  position: relative;
  z-index: 1;  
}

JavaScript

Attach a click event to the cell, and an event to all child links. Make sure child links events do not bubble up (stopPropagation()).

Nested Links & Buttons In A Card With Link NextJs

This issue is not really related to Next.js. You'd have the same issues with normal anchor tags because nesting links produces invalid HTML, though there are some workarounds like putting the nested link into an object tag.

Other than that, you could try the following approaches:

1. Handle either the container link or the nested links via an onClick handler instead of an anchor tag.
2. Don't nest your links in the HTML tree but instead make them siblings and align them using only CSS. You could use a div container and position all of your links with position: absolute inside that div.

In any case you will probably also need to look at event bubbling and add an onClick={e => e.stopPropagation()} where necessary.

---

Related Topics