Allow div elements in h1, h2, h3, h4, h5, h6 elements

[anneke]

Hello!

I've been having a discussion with colleagues about using div elements in h-elements (h1, h2, h3...), when it makes sense to style parts of the header differently, even though the content belongs together (and should not, for good reasons, become two seperate h-elements). Here is an example.

    <h2>
        <div>Beans are disgusting</div>
        <div>This is why we forbid beans</div>
    </h2>

I have just learned that a span within a h-element is allowed:

   <h2>
       <span>Beans are disgusting</span>
       <span>This is why we forbid beans</span>
   </h2>

But, to force a line break between the two, I would either have to add a <br /> or display: block to the span elements, and that feels counter-intuitive when there is a working solution already that makes those things unnecessary.

I would love to hear the reasons why example A is not allowed, and why example B is! :-)
And/or, if this can be discussed to make a change in the spec.

Addendum: I got linked info about the hgroup element, which is great, but I understand it is not yet supported by assistive technology, which is why I wanted to do this in the first place. (sadface)

With the highest regards,
Anneke

[domenic]

The difference between span and div is subtle and sometimes not very principled; maybe if we were designing HTML4 over from scratch there would only be a single one. But, since there is a difference, you should use span for this: it's precisely meant for breaking up text inside of flow content like headings. Using CSS to make the span display: block is not a hack; it's just expressing that stylistically, you'd like these things on separate lines, even if semantically they are both part of the heading.

[dpk]

Another standard (more descriptive) way to achieve what seems to be your original goal:

<hgroup>
  <h2>Beans are disgusting</h2>
  <h3>This is why we forbid beans</h3>
</hgroup>

The heading rank of the <hgroup> will be <h2> in this case, applying also to the <h3>. If you don’t think the ‘This is why we forbid beans’ part is subordinate to the ‘Beans are disgusting’ part, you can also use two <h2>s in the <hgroup> instead of an <h2> and an <h3>

[anneke]

Thanks @dpk , I did understand that hgroup has poor support in assistive technology and I want to improve the experience for people with AT, and don't want to introduce new issues. (Cry!)

[anneke]

@domenic Thank you for your answer! You say there is a difference, could you explain more of what it is that makes using a div in a h2 a bad idea? (Not trying to push something, I genuinely want to understand :) )

[domenic]

It's kind of by definition. The definition of "div" is "a generic container that isn't appropriate to put inside flow content like headings". Whereas the definition of "span" is "a generic container that is appropriate to put inside flow content like headings".

Like I said above, it's not clear how useful this distinction is, but it does exist, so we might as well follow it.

[anneke]

Okay, thank you for answering @domenic . I have to be honest, it feels a little bit like a "just because" thing and I was hoping for reasoning that explains why (and a clearer why not). I don't want to be like the ever-asking why five year old, .. but I guess I am 😂

Hoping someone else sees this and can give an answer, otherwise I'll close this (if it doesn't auto-close first)

[annevk]

Historically there were inline- and block-level elements and hX elements could only contain the former. Now it's a bit more muddled, but still largely follows that model (with phrasing and flow content as the big categories instead). If we allowed div we'd have to complicate the content model to not allow hX elements descendants when div elements are used as a descendant of an hX element. And we might have to forbid other flow content elements as well, depending. That gets complex quite quickly. It might be a fun exercise to see all the changes you would have to make to allow this, but no other things, to see if it's worth the effort.