HTML5: Reference for valid tags inside other tags

Question

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?

Why can't you wrap your text inside a div? maybe this will help you : stackoverflow.com/questions/4291467/… — eric.itzhak

robertc robertc · Accepted Answer · 2012-12-03T11:46:06

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.

HTML5: Reference for valid tags inside other tags

1 Answers