I was just wondering if it's 'officially' allowed to put a header (<h1>, <h2>, <h3>, etc.) within a <dt> element.

As it shows, the header "Promotion" on the screenshots Safari displays it as I intended it (screenshot #1), but Firefox (screenshot #2) stubbornly places the entire header outside of the <dt> tag.

I couldn't find anything about it being allowed or not, so I thought I'd just ask the community what they think about this.

Safari behavior
Firefox behavior

2 answers

2
points
This was chosen as the best answer

In the interests of "teaching the man to fish": the HTML specification is authoritative.

When introducing each element, the specs give it's DTD entry, which defines the element in a machine-readable (but more or less human comprehensible) format.

<!-- definition lists - DT for term, DD for its definition -->

<!ELEMENT DL - - (DT|DD)+              -- definition list -->
<!ATTLIST DL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Start tag: required, End tag: required

<!ELEMENT DT - O (%inline;)*           -- definition term -->
<!ELEMENT DD - O (%flow;)*             -- definition description -->
<!ATTLIST (DT|DD)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Start tag: required, End tag: optional

Each of the terms beginning with a % is defined earlier (and linked to the definition). The parentheses mark the specification of what the element may contain. The first section says that DL may only contain DT and DD elements. DT can only contain inline elements, and DD may contain flow, which is defined as block+inline - in other words just about anything normally allowed within BODY.

Lastly, the HTML Validator would have answered your question. It is simply a script which checks your document against the DTD.

Answered over 6 years ago by Richard Grevers
2
points

No, you can't use <h1-h6> in a <dt>-tag. <dt> only allows inline elements as childs. <h1-h6> is a block element.

Answered over 6 years ago by ReMichael