This post is created 2 years ago, the content may be outdated.
Goal
Here’s a html card component
Click anywhere on the card will navigate user to the article, but urls in the abstract is also clickable and have their own href, asif the inner anchor is floating above the anchor wrapping the whole card.
Problem
When trying to construct a component like the following image, one problem we are facing is anchor tag cannot be nested in html. That’s to say, if we write the code as the one shows below, it does not work.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
<!DOCTYPE html> <html> <body> <ahref="#"class="card-anchor"onclick="alert('Outer anchor clicked');"> <divclass="card"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non nunc sed quam ullamcorper accumsan a ut justo. <ahref="#"onclick="alert('Inner anchor clicked');">I am clickable!!!</a> Integer sed sodales eros, sit amet ultrices felis. </p> </div> </a> </body> </html>
Workaround
Instead of wrapping the card with anchor tag, the anchor can be a child with absolute position, with css to positioning it as a cover.
1 2 3 4 5 6 7 8 9 10 11 12 13 14
<!DOCTYPE html> <html> <body> <divclass="card"> <ahref="#"class="card-anchor"onclick="alert('Outer anchor clicked');"></a> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non nunc sed quam ullamcorper accumsan a ut justo. <ahref="#"onclick="alert('Inner anchor clicked');">I am clickable!!!</a> Integer sed sodales eros, sit amet ultrices felis. </p> </div> </body> </html>