Text Editor Removing “a” Tag

Two things come to mind.

1) Empty tags are usually removed as clutter cleanup.

2) Anchor tags are usually clickable links. It may be removed since it does not have a href attribute.

There are some workarounds.

1) Add a non-breaking space ( ) between the two anchor tags:

<a id="Menu">&nbsp;</a>

2) Add a non-clickable href:

<a href="javascript:void(0);" id="Menu">&nbsp;</a>

The above will prevent the link from doing anything.

If you’re using the Block Editor there should be an HTML block you can use instead. I do not believe this will remove empty tags as the regular TinyMCE editor does.

• This reply was modified 4 years, 9 months ago by Howdy_McGee.

My internal links work for a few minutes. Long enough for me to save, view my page, click all my links (13 on this page) to see if they work okay.

But when I return to the document, all my tags: have been replaced with  

After this, clicking a “read more” link goes nowhere.

My href code remains unchanged.
Can you help me find the error. Thank you

https://www.alionhasroared.org/index.php/feast-days/feast-days-just-for-the-jews/

Read more.

changed to:
Read more.
 

trying again:

[raw]Read more.[/raw]
[raw][/raw]

changed to

[raw]Read more.[/raw]
[raw] [/raw]

one more try

(a href=”#Abraham430″)Read more.(/a)
(a id=”Abraham430″)(/a)

changed to:

(a href=”#Abraham430″)Read more.(/a)
_nbsp_

From the sounds of it you’re running into issues of empty anchors. Maybe try something like this:

<a href="javascript:void(0);" id="abrham430">&nbsp;</a>

That being said, if you already have a link that jumps to a specific location, the end point doesn’t _need_ to be an anchor. You could say:

<a href="#Abraham430">Read More</a>

<div id="Abraham430">This is about Abraham.</div>

Or you could use an empty div with a non-breaking space:

<div id="Abraham430">&nbsp;</div>

I am still having issue with this.

When I enter this:

<div align="center" id="frontpage-menu">
<a href="/organic-farm-to-table-menu/#Vegan"><h4>Vegan</h4></a>
<div class="divide"></div>

<a href="/organic-farm-to-table-menu/#Jerk"><h4>Jerk</h4></a>
<div class="divide"></div>

<a href="/organic-farm-to-table-menu/#Pasta"><h4>Pasta</h4></a>
<div class="divide"></div>

<a href="/organic-farm-to-table-menu/#Seafood"><h4>Seafood</h4></a>
<div class="divide"></div>
</div>

It changes it to this:

<div id="frontpage-menu" align="center">
&nbsp;
<h4>Vegan</h4>
&nbsp;
<div class="divide"></div>
&nbsp;
<h4>Jerk</h4>
&nbsp;
<div class="divide"></div>
&nbsp;
<h4>Pasta</h4>
&nbsp;
<div class="divide"></div>
&nbsp;
<h4>Seafood</h4>
&nbsp;
<div class="divide"></div>
</div>

I found the below which doesn’t strip the code but I have to save the HTML somewhere because the editor is blank when I go back to edit the content.

https://linklay.com/stop-wordpress-automatically-removing-html-markups/

// START Stop removing div tags from WordPress – Linklay
function ikreativ_tinymce_fix( $init )
{
// html elements being stripped
$init[‘extended_valid_elements’] = ‘div[*]’;

// pass back to wordpress
return $init;
}
add_filter(‘tiny_mce_before_init’, ‘ikreativ_tiny_mce_fix’);

// END Stop removing div tags from WordPress – Linklay

Hello,

Form the looks of it, the system is trying to correct your HTML. You shouldn’t put a block level element inside an inline level element. The Anchor tag is an inline level element and the header 4 tag is a block level element. Try converting the h4 to a span and add a class to it so you can style it to look like an h4. This is more about semantic HTML than the site arbitrarily removing your formatting.

<a href="/organic-farm-to-table-menu/#Vegan"><span class="style-h4">Vegan</span></a>

Thank you so much. That helped!!