HTML5: Reference for valid tags inside other tags

html, validation

Solution

With HTML5 the old categories of `block` and `inline` have been extended and replaced by a new content model. The distinction between `block` and `inline` is now something which only really matters in CSS.

If you look at any particular element in the spec you'll see that it has a list of content categories it belongs to, the category in which the element can be used and the allowed content model of its descendants.

The `p` element has a content model of phrasing content, therefore it cannot contain a `pre` element because that can be used only where flow content is expected.

Problem

A while back I was using the w3c validator for HTML5 and I was experimenting with a tag to replace the deprecated `<tt>` tag. I typed this little example: ``` <!DOCTYPE html> <html> <head><title>Valid tags inside other tags</title></head> <body> <p>Inside paragraph you cannot use <pre>preformated text</pre></p> </body> </html> ``` And got this error: Line 6, Column 66: No p element in scope but a p end tag seen. But when I changed the `<pre>` tag for the `<code>` tag, no error was raised. I suppose this is because you cannot have preformated text inside a paragraph, but I had no luck searching for a regex or something that can point me to valid tags inside other tags. Anyone can point me to such resource? EDIT: Turns out that I suck at reading documentation and I haven't look at Block-level elements. So, now the question is, How can I know which are valid inline elements and how to use block-level elements inside other block-level elements?

Original source

Related problems