Are You Allowed to Nest a Link Inside of a Link

.card {  position: relative;  z-index: 1;  display: inline-block;  width: 100px;  padding: 50px;  background: #ccc;}
.cardlink {  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  z-index: -1;}

<div class="card">  <a class="cardlink" href="#fullcardview"></a>  <p>Foo bar baz</p>  <p>    <a href="#like">Like</a>  </p></div>

Can I nest a button element inside an a using HTML5?

No, it isn't valid HTML5 according to the HTML5 Spec Document from W3C:

Content model: Transparent, but there must be no interactive content descendant.

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).

In other words, you can nest any elements inside an <a> except the following:

• <a>

• <audio> (if the controls attribute is present)

• <button>

• <details>

• <embed>

• <iframe>

• <img> (if the usemap attribute is present)

• <input> (if the type attribute is not in the hidden state)

• <keygen>

• <label>

• <menu> (if the type attribute is in the toolbar state)

• <object> (if the usemap attribute is present)

• <select>

• <textarea>

• <video> (if the controls attribute is present)

If you are trying to have a button that links to somewhere, wrap that button inside a <form> tag as such:

<form style="display: inline" action="http://example.com/" method="get">
  <button>Visit Website</button>
</form>

However, if your <button> tag is styled using CSS and doesn't look like the system's widget... Do yourself a favor, create a new class for your <a> tag and style it the same way.

href inside href

In order to have nested a please do the following changes ....

You have to wrap the nested a inside a object tag.

<a href="/venues/manage/">
 <div class="col-md-4">
    <div class="panel panel-default">
     <img src="/img/venue.svg">
     <h5 class="text-vert crop">
         <b>Venue Title</b>
         <object><a href="#" data-toggle="tooltip" title="Verified Venue">Verified</a></object>
     </h5>
    </div>
 </div>
</a>

Here is a bootply (see the generated HTML) : http://www.bootply.com/MmYwCLTF0P

Here is a conference from Vitaly Friedman : https://vimeo.com/162334949

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.

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>.)

Nested text links in HTML

Use JavaScript for best results

I know:

I'd prefer solutions without scripting,

but…

any suggestions are welcomed.

You can add an inline onclick handler to a child span:

<a href="#A">AAAA <span onclick="event.preventDefault(); window.location.assign('#B'); return false;">BBBB</span> AAAA</a>

Or, to be DRY, pass in a reference to the handler instead:

<a href="#A">AAAA <span onclick="embedLink('#B');">BBBB</span> AAAA</a>

Definition of handler:

function embedLink(url) {
    event.preventDefault();
    window.location.assign(url);
    return false;
}

Working example:

a {  display: inline-block;  text-decoration: none;  color: blue;  border-bottom: 1px solid blue;  padding: 1px;}a .annotation {  color: fuchsia;  border-bottom: 1px double fuchsia;  background-color: white;}a:hover {  background-color: lightblue;}a .annotation:hover {  background-color: lightpink;}

<a href="#A">AAAA <span data-href="#B" class="annotation" onclick="event.preventDefault(); window.location.assign(this.getAttribute('data-href')); return false;">BBBB</span> AAAA</a>