Next.js Discord

Discord Forum

Using <a> inside of <a>

Answered
Yellowhead catfish posted this in #help-forum
Open in Discord
Avatar
Yellowhead catfishOP
Am I not allowed to use an <a> element inside of another <a> element? It renders fine, but I get these errors from Next.JS 
    <a
      className="flex flex-col p-6 rounded-xl w-[90vw] md:w-full md:max-w-sm md:min-h-52 border border-white/[0.2]
                  hover:border-white/[0.3] hover:-translate-y-2 duration-500"
      href={link}
    >
      <a href={link2}>
        <IconBrandGithub className="brightness-50 absolute rounded-full ml-[17.25rem] -translate-y-4 hover:scale-105 hover:brightness-100 duration-500"/>
      </a>

      <img className="rounded-full " src={image} alt="" width={100} height={100}/>

      <h1 className="mt-2 text-xl font-bold">{title}</h1>

      <p className="mt-1 text-sm text-neutral-500">{description}</p>
    </a>
Image
Answered by Rafael Almeida
I had a few designs where a clickable element would contain a smaller element that should also be a link, in this case the fix would be to render them wrapped by a div and move the "nested" element on top of the first element
View full answer

9 Replies

Avatar
Rafael Almeida
nested anchor tags is invalid HTML: https://stackoverflow.com/a/18667146
Avatar
Yellowhead catfishOP
well thats dumb
how else can i do it then?
and why does it work fine
Avatar
Rafael Almeida
the logic of the browser is to always try to render the document regardless of issues in the markup to avoid breaking websites, this is why initially it works
but React will try to avoid the mistake by throwing an error during hydration
all you need to do is to fix the HTML
Avatar
Rafael Almeida
I had a few designs where a clickable element would contain a smaller element that should also be a link, in this case the fix would be to render them wrapped by a div and move the "nested" element on top of the first element
Answer
Avatar
Yellowhead catfishOP
alright