Content layout with CSS display property changed

Question

In the <button> section of the specification, we see that the permitted content is only frasing content . This is the actual part of the HTML code (noted here ):

 <button> <span></span> </button> 

This is an invalid piece of HTML code (noted here ):

 <button> <div></div> </button> 

Error: The div element is not resolved as a child of the button element in this context. (Suppression of further errors from this subtree.)

But we can change the display <span> property:

 <button> <span style="display: block"></span> </button> 

And it looks like we are using <div> instead of <span> , but the HTML is valid. Is it ok (by specification) to use the allowed content item and change its display property?

Answer 1

Even if you create a span with display: block , you still cannot place block-level elements inside it:

 <div><p>correct</p></div> <span style="display: block;"><p>wrong</p></span> 

HTML (X) should still obey (X) HTML DTD (no matter how you use it), no matter how CSS changes things.

Therefore, they are different, and therefore there is nothing problematic here.

Answer 2

But in HTML5, some block elements can be placed inside inline! we are talking about placing block elements inside a link, and in other cases this makes no sense. Block Level Links in HTML5