Headers in definition terms? (HTML)

Question

I've noticed an awkward occurence in Firefox/Firebug:

<dl>
    <dt><h3>test</h3></dt>
    <dd>stuff</dd>
</dl>

renders as this

<dl>
    <dt></dt>
    <h3>test</h3>
    <dd>stuff</dd>
</dl>

I've never seen this happen before. Can anyone explain why?

Answer 1

Yeah. <dt>s can't contain <h3>s according to the DTD.

Firebug doesn't show you your actual source; it shows you what Firefox rewrote your source to before rendering. Firefox, like every browser, will make guesses about what you meant when you write invalid markup. What you're seeing is the result of that guess.

The solution going forward, of course, is to write standard code.

Answer 2

Probably because it's invalid XHTML and this is how the Firefox's error recovery works:

Line 14, Column 12: document type does not allow element "h3" here; missing one of "object", "ins", "del", "map", "button" start-tag

http://validator.w3.org

FWIW, I tested Chrome, IE and Opera and none of them exhibited the same behavior. This is a solid argument for why you should write valid markup and not rely on the parser's error recovery - browsers handle errors in their own way.