A tags get removed when switching between visual and html editor mode

  • trizonia

    (@trizonia)


    8 years, 10 months ago

    I’m using the WYSIWYG editor and trying to add this code:

    <div> <a href="#"> <h4>Text</h4> </a> </div>

    When I switch to the visual editor and then back to the html editor, this becomes:

    <div> <h4>Text</h4> </div>

    Other times-if I change the code a bit, it just moves the a tags around to some random place and messes up the code.

    The thing happens with:
    <a href="#"><div>Text</div></a>
    It turns into:
    <div>Text</div>

    This is not the only case where the editor does this. It very often moves code around, removes empty divs and sometimes becomes practically impossible to work with.

    Does anyone know how to solve this (without messing around with the native WordPress code), and are there any plans from WordPress to improve the editor?

    Thanks in advance

Viewing 5 replies - 1 through 5 (of 5 total)
  • Ismail

    (@elhardoum)

    8 years, 10 months ago

    Try wrapping the link in the heading instead:

    <div>
<h4><a href="#">Text</a></h4>
</div>
    Thread Starter trizonia

    (@trizonia)

    8 years, 10 months ago

    Thanks Samuel.
    What you’re proposing works for simple cases (such as my example). I wouldn’t know how to implement it in a situation I come across very often, when I have to wrap a larger chunk of code with a tags.
    e.g.
    <a href="#"><div>Content</div><h4>Header</h4></a>

    which turns into:

    <div>Content</div>
<h4>Header</h4>
    Ismail

    (@elhardoum)

    8 years, 10 months ago

    @trizonia,

    All those HTML elements ( headings, divisions ) must be out of the a href element.

    To code a good HTML, you must wrap the href in those elements, not the opposite. And you shall repeat the linking for every element:

    <div>
  <a href="#">Content</a>
</div>
<h4>
  <a href="#">Header</a>
</h4>

    If you insist to put it this way [<a href="#"><div>Content</div><h4>Header</h4></a>] which WP is correcting in the editor, you can create a custom template for that post or page and code without getting WP to correct the syntax. But, that is considered a bad HTML and search engines like Google don’t like it.

    Thread Starter trizonia

    (@trizonia)

    8 years, 10 months ago

    Samuel,
    First of all, thank you for your reply.

    After doing some research, I have found all sources stating that since HTML5, this is perfectly valid. As stated here:
    http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element
    “The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).”

    Also, I found no evidence that Google doesn’t like it; sure, if you wrap an entire article in a tags, it wouldn’t be that great, but for a small banner with text and an image, I doubt (and found no evince that) they care.
    Besides, before HTML5 people would use Javascript to the same effect – because the need existed then, as it does now.

    The solution you propose results in something other than what I want, which is: A clickable area with a link, which is highlighted as one when one hovers over it and which contains various text tags and possibly an image.

    So, since HTML5 considers this valid practice, why does WordPress not allow it? Even if it weren’t the best code possible, I think it’s a rather dictatorial behavior of WordPress to impose its code view on its users.

    nicholasmt

    (@nicholasmt)

    7 years, 10 months ago

    @trizonia I’m frustrated by this issue. Our content editors are frequently breaking the front page of our site because of it. Have you found any solution?

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘A tags get removed when switching between visual and html editor mode’ is closed to new replies.