How to put a link to an image already linked in HTML/CSS-CodePudding

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>

CodePudding user response：

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

CodePudding user response：

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