Why can't I nest these headings in HTML? (beginner level) - html

Question

I'm doing some of these basic lessons for HTML on Codeacademy, and I've hit my first round-block. Why doesn't this construct work properly?
<h1>
First text.
<h4>
I'm a different size than the first text.
</h4>
I'm not the same size as the first text. Why?
</h1>
I don't really know what headings are. Code Academy hasn't really explained much.
Thanks to anyone who takes the time to look at my n00b question.

Answer 1

I can't find a good reference for this, but it looks like nesting these tags is simply not allowed.
Browsers are pretty lenient about what they'll attempt to display. In this case, I believe the browser closes the h1 tag for you when it encounters the h4 tag. Then it quietly ignores the spurious </h1> it finds later—remember that it already closed it for you.
So the actual elements I see in Chrome are roughly this:
<h1>First text.</h1>
<h4>I'm a different size than the first text.</h4>
I'm not the same size as the first text. Why?
You can see this yourself in Chrome's developer tools (or the equivalent in your browser of choice).
UPDATE
The HTML 5 spec is a good place to learn about this. If I'm understanding it correctly, h1, h2, etc. are "flow content" and expect "phrasing content" to be nested inside (not other flow content). I'm new to reading this spec, so I may be misunderstanding the structure of the document. Someone please correct me if I'm wrong!

Answer 2

If you want to achieve this used span tag instated of nesting head tag.
Like this :
<h1>
First text.
<span>
I'm a different size than the first text.
</span>
I'm not the same size as the first text. Why?
</h1>
CSS:
h1 span{
font-size:20px;
display:block;
}

Answer 3

Heading tags are block level elements like <p> tags. You can think of them taking up a whole line. Thus with your example you're trying to squeeze a whole line inside of a full line. It just won't fit. Your browser probably assumes you meant to have a </h1> right before the <h4> tag in your example. Thus the remaining text after the </h4> tag is just seen as plain text and the closing </h1> tag is simply ignored.
If you want switch between h1 text and h4 text. you need something like this:
<h1>first text.</h1>
<h4>I'm a different size than the first text.</h4>
<h1>I'm now the same size as the first text</h1>
If for some inexplicable reason, you want the h1,h4,h1 tags in the same line. You'll need to use css. You could add a class, then set them as inline block. However, if you just want to change the styling of text in a line, you should use span tags instead.