Header inside a paragraph

I was doing some practice on CSS descendant topic.

Here's the html:

<div id="sample">
 <p>
  <h2>Header</h2>
 </p>
</div>

And here's the CSS

#sample p h2{ color: blue;}

I was trying to change the header's color to blue, but it wasn't working.
Why? Because the browser implicitly terminate the p element when they encounter a heading.
According to the standard, a paragraph can not contain other block elements.

The browser changed the html to this:

<div id="sample">
 <p></p>
 <h2>Header</h2>
</div>

I use Google Chrome browser. To check what the browser changed, open the Developer Tools (Ctrl + Shift + J), then click the Elements tab on the left top.

Source:
http://stackoverflow.com/questions/15656785/should-a-heading-be-inside-or-outside-a-p