如何链接到已在 HTML/CSS 中链接的图像

Question

I was trying to create a similar Apple site to learn HTML & CSS, and I stopped when I couldn't figure out how to put a link on an image that already has a link itself, I will post here the "code" hoping someone can help me...

 <a href="https://apple.com/iphone-14"> <div class="hero" style="background-image: url(Images/iPhone_14-HERO-SMALL.jpg); margin-top: -15mm"> <header class="titleText"> <div style="color: #1D1D1E; font-family: SF-Pro-Bold;">iPhone 14</div> <div style="color: #1D1D1E; font-size: 7.5mm;">Big and bigger.</div> <span style="color: black"><a href ="https://apple.com/iphone-14">Learn more ></a></span> <!-- This is the part that deletes the whole link image --> </header> </div> </a>

Answer 1

First of all you should attend that using a block-level element like div or the worse than that header element! in an inline-level element like a is not html5 standard then according to your DOM you are wrapping a link inside another one: So it is better to write your DOM something like example below:

<a class = "hero" style = "background-image: url(Images/iPhone_14-HERO-SMALL.jpg); margin-top: -15mm">
   <span style = "color: #1D1D1E; font-family: SF-Pro-Bold;">iPhone 14</span>
   <span style = "color: #1D1D1E; font-size: 7.5mm;">Big and bigger.</span>
<a href ="https://apple.com/iphone-14" style = "color: black; position: relative; z-index: 2">Learn more ></a>
</a>

and if you wanna have a block level element so style display: block to your inner spans

Answer 2

<a href="https://www.apple.com/iphone-14/"><img src="image-link-here" alt=""></a>