I’ve been experiencing a very strange error. I created a button set for a website and I ported it into the website I made it for by copying and pasting. There were a couple small issues mostly because of wordpress, and one really big one that I can’t figure out.
Whenever I create an anchor element wordpress copies this a tag element and duplicates it 3 times, one before the element and two after it. It also puts 2/3 of these inside of a p tag.
Screenies below, please help.
Here is the actual code.
<!-- Here I am testing what happens when I add the anchor element -->
<!-- This results in three duplicates -->
<a href="javascript:alert('button event');" title="test case"><div style="display:inline-block;" class="button button__orange button__large"><h5><span class="icon-newspaper"></span> LEARN MORE</h5></div></a>
<!-- This does not -->
<div style="display:inline-block;" class="button button__orange button__medium button__icon--introduce"><h5><span class="icon-newspaper"></span> LEARN MORE</h5></div>
I was working with my backend developer, and he realized what was causing this problem.
Apparently, you are not supposed to put an H5 inside of an anchor tag, because it causes weird errors like this one.
Lesson: Don’t nest headings inside of anchor tag, surround the anchor in the heading tag.