Does HTML5 allow a block-level element (like div) inside a heading (like h1)?

Question

I would always have said no, but then I came across this code from Semantic UI (and Fomantic UI), a very popular front-end framework:

<h2 class="ui icon header">
  <i class="settings icon"></i>
  <div class="content">
    Account Settings
    <div class="sub header">Manage your account settings and set e-mail preferences.</div>
  </div>
</h2>

The code struck me as unusual for two reasons: (1) the <i> tag has been repurposed as a generic hook for an icon, and (2) there's that nested <div> sitting right there inside the <h2> element. I question the semantics of the first, and the validity of the second.

Now I suppose the code works in all major browsers or they wouldn't have used it, but it hardly seems idiomatic. More importantly, is it even valid?

---

Note: I used the term 'block-level element' in the question (which everyone understands), but as MDN docs point out:

The distinction of block-level vs. inline elements was used in HTML specifications up to 4.01. In HTML5, this binary distinction is replaced with a more complex set of content categories. While the "inline" category roughly corresponds to the category of phrasing content, the "block-level" category doesn't directly correspond to any HTML5 content category, but "block-level" and "inline" elements combined together correspond to the flow content in HTML5.

Ferree

Answer 1

This is nasty code, completely off spec. Inside of a h2 you can only have inline elements phrasing content elements like span, strong, em, etc. The <i> tag is often used for icons though, so nothing shocking about that. But the divs ...? Shockingly bad. Switch them to <span> and the code would be valid.

Here's the official spec of what h1, h2, etc. can contain. So-called "phrasing content": https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#phrasing_content

Edit: MDN is not the official spec, as noted by the original poster in the comments. It is however based on the official spec. The authoritative source on HTML is supposedly the HTML Living Standard from Web Hypertext Application Technology Working Group (WHATWG). They offer good information about phrasing content and headings (h1-h6).

Lorettelorgnette

I'm checking docs... but I believe this is not correct. h2 is a block element. Nesting block and inline elements within block elements is allowed. Nesting a block element in an inline element is not. – Unhorse

Seems like h1-h6 only allow "phrasing content" which doesn't include divs.. Both headings and divs belong to the category "flow content", so they can have phrasing content within. But not another flow content element within itself. developer.mozilla.org/en-US/docs/Web/Guide/HTML/… (divs are flow elements and flow – Lorettelorgnette

OK, reading about this more has been very interesting. The "block"/"inline" concept we are both thinking of was HTML4 and is not part of HTML5 spec. HTML5 deals with elements in a different way. In HTML5, header elements may contain phrasing content (w3.org/TR/2010/WD-html-markup-20101019/h1.html) While div is flow content (w3.org/TR/2010/WD-html-markup-20101019/…) So you are correct that div should not be in h2 – Unhorse

(And I see you replied while I was typing, and found the same answer I did! Cheers.) – Unhorse

I'm not sure you can refer to MDN docs as the 'official spec', although it's certainly based on it. Good answer all the same. Thanks for your clarifying comments too @TedA. The most up-to-date spec is maintained by WHATWG these days, not W3C. See: The h1, h2, h3, h4, h5, and h6 elements and Phrasing content. – Ferree

Yes you're right, will update the answer based on your comment and links. – Lorettelorgnette

Answer 2

HTML is derived from SGML, which was designed to standardize the layout of paper documentation. in this logic, the tags H1 to H6 are made for the different levels of titles, so simply saying a title is a kind of advertisement and it must be short and brief.

Therefore, in principle, the H tags should not contain a hierarchical level of information.

Also, the div tag does not exist in SGML, and it did not exist in early HTML versions either. The DIV tag was made by Microsoft to replace the LAYER tag, the result of many tactics aimed at eliminating other browsers other than IE. The story is well known and Microsoft has also been condemned for several of these facts.

Luminesce

Right. In other words, the Semantic UI usage really isn't all that semantic is it! – Ferree

Answer 3

According to HTML5 spec, it is not valid... But lots of UI libraries do not follow this strict semantic way, even Google is using <center> tag in its homepage with HTML5 Doctype. So it is not a "must", maybe just a "should"... Following the spec is a good practice, but a developer shouldn't put too much effort on this.

In addition, it is a google practice to check about validity of html markup, check the link below... https://validator.w3.org/nu/#textarea

Zhao