nested <a> tags not being properly rendered

[balmy basin]

Hi, I'm trying to create a project card which on it's own is clickable but also contains overlay parts which are shortlinks. The issue I'm facing now is that those nested a links get split up. This resolves in some surprising behaviour.

This is an example of a component which gets rendered. If links are provided it should add those as a nested a link, but in that case the final code results to something bizarre.

<!-- The Component Code in astro -->
<a href={page_link}>
    <div class="project-card">
        <Image densities={[2, 1.5, 1]} loading="eager" src={(images[background]())} alt=""></Image>
        <div class="links">
            { links.website && <a href={links.website}>Website</a>}
            { links.steam && <a href={links.steam}>Steam</a>}
            { links.itchio && <a href={links.itchio}>Itch</a>}
        </div>
        <div class="info">
            <div class="landing-info">
                <Image loading="eager" src={(images[logo]())} alt={name + "'s Logo"}></Image>
            </div>
            {description && <div class="description">
                {description}
            </div>}
        </div>
    </div>
</a>

<!-- The Output as it's shown in browser.
   - I have truncated the whole links to the components.
 -->
<a href="page_link" data-astro-cid-mspuyifq="" data-astro-source-file="...ProjectCard.astro" data-astro-source-loc="23:21"> </a>
<div class="project-card" data-astro-cid-mspuyifq="" data-astro-source-file="...ProjectCard.astro"
data-astro-source-loc="24:31">
  <a href="drilly42" data-astro-cid-mspuyifq="" data-astro-source-file="...ProjectCard.astro"
  data-astro-source-loc="23:21">
    <img src="thumbnail.png"
    srcset="thumbnail-srcset"
    data-image-component="true" loading="eager" alt="" data-astro-cid-mspuyifq=""
    width="600" height="400" decoding="async" data-astro-source-file="...Image.astro"
    data-astro-source-loc="38:2">
  </a>
  <div class="links" data-astro-cid-mspuyifq="" data-astro-source-file="...ProjectCard.astro"
  data-astro-source-loc="26:28">
    <a href="drilly42" data-astro-cid-mspuyifq="" data-astro-source-file="...ProjectCard.astro"
    data-astro-source-loc="23:21">
    </a>
    <a href="website" data-astro-cid-mspuyifq="" data-astro-source-file="...ProjectCard.astro"
    data-astro-source-loc="27:56">
      Website
    </a>
    <a href="itchio" data-astro-cid-mspuyifq="" data-astro-source-file="...ProjectCard.astro"
    data-astro-source-loc="29:54">
      Itch
    </a>
  </div>
  <div class="info" data-astro-cid-mspuyifq="" data-astro-source-file="...ProjectCard.astro"
  data-astro-source-loc="31:27">
    <div class="landing-info" data-astro-cid-mspuyifq="" data-astro-source-file="...ProjectCard.astro"
    data-astro-source-loc="32:39">
      <img src="logo.webp"
      data-image-component="true" loading="eager" alt="name's Logo" data-astro-cid-mspuyifq=""
      width="480" height="76" decoding="async" data-astro-source-file="...Image.astro"
      data-astro-source-loc="38:2">
    </div>
  </div>
</div>

The easiest way to duplicate this behaviour is to create two <a> tags inside of each other.

<a href="first">First<a href="second">Second!</a></a>

I'm not sure if this is intended or if this is an error. Looked through the github issues without finding something, but could also be that searching for <a> tag specific issues is difficult purely because it's just an "a". Any help or insights greatly appreciated!

[patent basalt]

Nesting of A-Tags is not allowed by definition. The whole content of an a-tag is linked. therefore an inner a-tag makes no sense.

If you need a clickable card the best approach is the "clickable parent" pattern described here: https://automaticcss.com/docs/clickable-parent/
This is also good for accessibility reasons.

[balmy basin]

alright, thanks! Implemented that approach now, probably slightly different but works like great!