HTML H3 element in H1

Question

<h1>Hello<h3>World</h3></h1>

If this is my html, all the browsers removes the h3 out side of h1.If I see the source

<h1>Hello</h1>
<h3>World</h3>

As per to my knowledge h1 and h3 both are block elements. Why cannot I place a block element inside a another block.

http://jsfiddle.net/J3dP4/

Answer 1

From w3.org on the h1 element :

Permitted contents :

Phrasing content

The phrasing elements are listed here :

a or em or strong or small or mark or abbr or dfn or i or b or s or u or code or var or samp or kbd or sup or sub or q or cite or span or bdo or bdi or br or wbr or ins or del or img or embed or object or iframe or map or area or script or noscript or ruby or video or audio or input or textarea or select or button or label or output or datalist or keygen or progress or command or canvas or time or meter

h3 isn't among them.

So no, you can't put a h3 in a h1 .

Answer 2

<h1> and <h3> are both the same kind of block element, the heading level. It would make no difference if it "worked" as you intended, the result would be the same.

Same happens all the way through <h1> to <h6> .

Answer 3

There's why you shouldn't do that, and why you can't do that.

For why you shouldn't do that, see dystroy's answer.

Why you can't do that, it is simply that the parse rules don't let you. But that's only because you are trying to make one h? element the direct child of another h? child. If it's a descendant but not a direct child then the parse rules don't stop you. For example,

<h1>Hello<div><h3>World</h3></div></h1>

Jsfiddle

will put an h3 element inside a div element inside an h1 element. Note however, that this arrangement is still invalid and you should not do it.