I know in HTML4 that a span (inline element) could not contain a div (block-level element), but under HTML5 I'm not so sure:
Most elements that are categorized as phrasing content can only contain elements that are themselves categorized as phrasing content, not any flow content.
I.e. it's the bit where it says "Most elements" that leads to my confusion.
If you use the W3C Validator to check a simple document:
<!DOCTYPE html> <html lang="en"> <head> <title>Title</title> <meta charset="utf-8"> </head> <body> <span> <div><p>Some text</p></div> Some text </span> </body> </html>
it does not report an error when validating it as HTML5. If you set the doctype to "HTML 4.01 Transitional" it does. Perhaps this is just because the HTML5 validation is experimental?
The html5.validator.nu service does report an error however, stating:
Error: Element div not allowed as child of element span in this context. Contexts in which element div may be used: Where flow content is expected. Content model for element span: Phrasing content.
By the way, this isn't something I plan on doing. I'm just intrigued as to whether it can be valid under HTML5.
If you refer to the current HTML5 working draft, SPAN states that its Content model is Phrasing content. Now if you look at DIV, it states under Contexts in which this element may be used that it can only be used Where flow content is expected.
If my interpretation is correct, then a DIV cannot appear within a SPAN. And as you said earlier, HTML5 is still experimental, so you cannot expect the W3C Validator to work perfectly.
I did get errors when validating the OP's html codes. Here's the screenshot:
Input codes validating against HTML5 using W3C Validation Service:
<DIV> is essentially a block variant of
<SPAN> or you can put it as
<SPAN> is an inline variant of
One of the rationales behind DIV 'not allowed' within SPAN is because it doesn't really make semantic sense to have a block element within an inline element. Although of course you can insist to do it.
I am very sure most browsers will continue to support rendering of DIV within SPAN, just like how they continue to support deprecated elements/attributes etc. W3C's validator will of course continue to throw errors for it.
I tested your document, and the W3C validator gives exactly the same error using HTML5. Maybe you should redo your test.
Div is a block element and span is an inline element, you cannot put a block element inside an inline element. I imagine HTML5 will honour this rule as it is a foundation of the span div hierarchy.