Why do I keep losing links when I switch to visual editor in Wordpress

Question

I have this problem in a specific page of my wordpress website: when I switch from text editor to visual editor I immediately lose all my links (placed in a div element).

I give you a detailed example of what happen every time:

I start editing my page and the section with href looks like this

Then, if I switch to visual editor and come back to the text, it becomes like this

As you can see the "a" element has disappeared and it's very annoying because I have to replace all my links every time or switch to a previous edit and losing my recent ones.

How can i solve this? I would like to be able to switch freely between editing modes without losing any code.

Thanks a lot.

Answer 1

The problem is your <div> inside of your anchor tag. See this answer on StackOverflow about what tags are allowed inside of anchors.

Inline elements ( a, span, strong, em among others ) can contain other inline elements and text nodes.

and

Generally, block-level elements may contain inline elements and other block-level elements. Generally, inline elements may contain only data and other inline elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.

Anchors are inline, while <div> tags are block-level, hence the block-level element cannot go inside of the inline element. If you need the element inside of the link, try using a <span> with the display:block CSS property:

<a href="somelink"><span class="tag">Link</span></a>