HTML links are deleted/stripped after saving

Question

I want to add code to a page in Magento as follows:

<div class="row">
    <div class="col-md-3">
        <div class="fp-img-hover-wrapper"><img alt="Image 1" src="https://domain.com/image1.jpg"></img>
        <a href="https://link1.com"><div class="overlay"><span>Link<br />#1</span></div></a></div>
    </div>
    <div class="col-md-3">
        <div class="fp-img-hover-wrapper"><img alt="Image 2" src="https://domain.com/image2.jpg"></img>
        <a href="https://link2.com"><div class="overlay"><span>Link<br />#2</span></div></a></div>
    </div>
</div>

After I saved this a second time, the links are gone and I find this:

<div class="row">
    <div class="col-md-3">
        <div class="fp-img-hover-wrapper"><img alt="Image 1" src="https://domain.com/image1.jpg"></img>
        <div class="overlay"><span>Link<br />#1</span></div></div>
    </div>
    <div class="col-md-3">
        <div class="fp-img-hover-wrapper"><img alt="Image 2" src="https://domain.com/image2.jpg"></img>
        <div class="overlay"><span>Link<br />#2</span></div></div>
    </div>
</div>

How can I solve this and why is Magento doing this? Thanks!

Answer 1

I would imagine it's because wrapping a div (block-level element) in an anchor (inline element) isn't valid HTML, so they were stripped. Try replacing:

<div class="overlay">

With:

<span class="overlay">

And see if that helps.