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:

The span element context is "where phrasing content is expect". Referring to the definition of phrasing content it says:

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"> 
      <meta charset="utf-8"> 
         <div><p>Some text</p></div>
         Some text

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.

  • Ok, thanks folks. I think Geoffrey Lee pointed out the important part, "Content model". See my comments under his answer. Also thanks to Doug and o.k.w for making me realise that if you explicitly set the W3C validator to HTML5 it does throw up an error. When I'd checked I was letting it set the doctype automatically (it did detect it as HTML5) - so seems like a bug in the W3C validator. atomicules over 9 years ago

4 answers

This was chosen as the best answer

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.

Answered over 9 years ago by Geoffrey Lee
  • Your interpretation is correct. Rob over 9 years ago
  • Ok, so the Content Model is the important part. I can understand that. I'm still unsure as to why for Phrasing Content the spec doesn't just say "ALL elements that are categorized as phrasing content can only contain elements that are themselves categorized as phrasing content, not any flow content." atomicules over 9 years ago
  • Could it be because some of these elements listed under Phrasing Content, such as MAP and INS, have a content model of Transparent? And according to Transparent Content Models: "When a transparent element has no parent, then the part of its content model that is "transparent" must instead be treated as accepting any flow content." atomicules over 9 years ago
  • Yes, that particular part of the documentation is confusing. The HTML5 spec is currently in a "Last Call for Comments" status, so I would encourage you to submit feedback to the editor regarding this. On a related note, the HTML5 spec contains a helpful Venn diagram that better explains the types of content and how they are related. http://dev.w3.org/html5/spec/Overview.html#kinds-of-content Geoffrey Lee over 9 years ago
o.k.w 2355

I did get errors when validating the OP's html codes. Here's the screenshot: Input codes validating against HTML5 using W3C Validation Service:

Error Message:

<DIV> is essentially a block variant of <SPAN> or you can put it as <SPAN> is an inline variant of <DIV>.

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.

Answered over 9 years ago by o.k.w
Doug 1095

I tested your document, and the W3C validator gives exactly the same error using HTML5. Maybe you should redo your test.

Answered over 9 years ago by Doug
  • Ah, interesting! I just let it choose the doctype automatically (when it passed), but if I explicitly set it to "HTML 5 experimental" then it throws up the error. atomicules over 9 years ago

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.

Answered over 9 years ago by Stephen
  • While that is true in this particular instance, it is also worth noting that <a> was an inline element in HTML 4.01, but HTML5 now allows it to contain elements like <div> due to popular demand. Geoffrey Lee over 9 years ago