table tr td p h2 - what's wrong with that?

Question

Why I can't place h2 inside paragraph inside table cell? (tested on Chrome and FF)

<table>
    <tr>
        <td>
            <p>
                <h2>Header</h2>
                test123
            </p>
        </td>
    </tr>
</table>

http://jsfiddle.net/4e6Lp/

Paragraph content jumps out to the td and p becomes empty:

Answer 1

The content model of p allows only “inline” or “text-level” content. The exact content model (and terminology) varies by HTML version, but no version regards h2 as inline/text-level. See e.g. HTML 4.01 spec text on the p element. The requirement is rather natural if you think of p in its old meaning in HTML: it marks up a paragraph of text. It’s basically a block of copy text.

The content model is enforced by browsers, by parsing rules: when a p element is open, an <h2> tag implicitly closes it. So in the case given in the question, the td element contains a p element with just whitespace as content, then an h2 element, and then “loose” text (just a text node).

The conclusions depend on your reasons for wanting to wrap the cell content in a p element. Normally, there is no reason to that. But if you need a wrapper, use the div element instead.

Answer 2

Following to these source: http://risd.generic.cx/containment.html p element can hold only:

• TextNode
• a
• strong
• em
• img

But I think that <p> can hold any inline and inline-block element.

Answer 3

Unless it is intentionally meant to be a header, you can just make the text bold instead:

<table>
    <tr>
        <td>
            <p>
                <strong>Header</strong><br>
                test123
            </p>
        </td>
    </tr>
</table>

Or, as @Epsil0neR says, use the <h2> header outside of <p> paragraph