wpautop adds opening & closing p tags around the opening a tag and around the closing a tag when the link contains certain flow content elements like div, h1, h2...

[diegocanal]

Hi,

Description

wpautop leaves <a href=""> (opening tag of the link) in between <p></p> tags and </a> (closing tag of the link) in between <p></p> tags when the link contains certain flow content elements like div, h1, h2...

Example 1

If I add this to the HTML editor:

<a href="https://example.com/"><div>DIV inside link</div></a>

The output source code is:

<p><a href="https://example.com/"></p>
<div>DIV inside link</div>
<p></a></p>

---

Example 2

If I add this to the HTML editor:

<a href="https://example.com/"><h1>H1 inside link</h1></a>

The output source code is:

<p><a href="https://example.com/"></p>
<h1>H1 inside link</h1>
<p></a></p>

---

Note 1

I would like to point out that html flow content elements such as <div> or headings (<h1>, <h2>, <h3> ,...) belong to the category of permitted content for the <a> element. References:
​WHATWG HTML Living Standard |The definition of a
​HTML5 | The definition of a
​MDN | The definition of a.

---

Note 2

This issue might be related to ticket #34722

[diegocanal]

screenshot-wpautop-wp-bug

[hlashbrooke]

As a general HTML rule (regardless of whether it's WordPress or not), block level elements should never be wrapped inside inline elements. So a div or h1 should never be placed inside an a tag. I imagine that is why wpautop handles things in this way, as you are going against the general HTML standards that are accepted all over the web.

I'm not on the core team and don't have the requisite knowledge for patching this, but I don't think it really warrants a patch as this is not a bug, but rather an HTML standard that is being adhered to.

[diegocanal]

Replying to hlashbrooke:

As a general HTML rule (regardless of whether it's WordPress or not), block level elements should never be wrapped inside inline elements. So a div or h1 should never be placed inside an a tag. I imagine that is why wpautop handles things in this way, as you are going against the general HTML standards that are accepted all over the web.

I'm not on the core team and don't have the requisite knowledge for patching this, but I don't think it really warrants a patch as this is not a bug, but rather an HTML standard that is being adhered to.

@hlashbrooke, have you fully read my initial comment (specially "Note 1")? After reading "Note 1", do you still need more arguments to make you realise that div and h1 can be perfectly placed inside an a element? I can give you more.

I provided arguments –referencing 3 authoritative sources– to support my statement, you haven't done the same to support yours. Could you please give us something more than "because I say so"?

[hlashbrooke]

I didn't realise this was an argument :)

It seems you are probably correct, but parsing all of that content about HTML standards is pretty daunting to be honest, so I'm not going to go through the task of interpreting it all. I merely commented on here to weigh in on it a bit, but I'm not that invested in the outcome.

I was just pointing out that it isn't generally accepted in HTML practice, even if it is permissible. I'll leave this to more experienced minds to work out from here :)

[diegocanal]

Replying to hlashbrooke:

I was just pointing out that it isn't generally accepted in HTML practice, even if it is permissible.

I couldn't disagree more with you. FYI, nesting block elements such as div and headings (h1, h2, etc) inside the a element (links) has been widely used ​since 2009. Here you have some examples I found in very well known sites:

• ​Apple (look at the 4 blocks below the slider)
• ​Amazon (towards the bottom look at "Your recently viewed items and featured recommendations" section items)
• ​Google (all over the page)

[hlashbrooke]

Well then - I'll let someone else with more authority weigh in here - I was just trying to be helpful :)

[diegocanal]

Replying to hlashbrooke:

Well then - I'll let someone else with more authority weigh in here - I was just trying to be helpful :)

Thank you @hlashbrooke! :)

[calvinkoepke]

I can confirm that is has been a recurring issue for me as well, and for quite some time. I have no knowledge of how to fix the parsing issue, but it is certainly there and would, in my opinion, warrant a patch.

[bfintal]

Might be related to #40603

[afercia]

Worth noting
<a href="https://example.com/"><div>DIV inside link</div></a>
is valid in HTML5. However, WordPress shouldn't assume all the themes use HTML5 as this would be invalid in HTML 4.0.1.

[diegocanal]

Replying to afercia:

Worth noting
<a href="https://example.com/"><div>DIV inside link</div></a>
is valid in HTML5. However, WordPress shouldn't assume all the themes use HTML5 as this would be invalid in HTML 4.0.1.

You are right pointing out that this kind of structures would not be valid in HTML 4.0.1 but...even if a developer made a mistake using invalid code (in HTML 4.0.1), how would it help having wpautop messing up the code? The way wpautop works now, it outputs invalid code for both standards, HTML5 and HTML 4.0.1. Sorry, I think I'm missing the point.

[afercia]

@diegocanal bolding text is not necessary :) I'm not saying this shouldn't be addressed. Just that it's not so simple as it seems at first sight.