Question

I ran into a problem where I have to embed block level content directly inside a h1-h6 context. From the HTML5 specification I take that this has been ruled out to ensure compatibility with the default styles. Consequently, my code will not validate as HTML5. (However, it display perfectly in any browser I tested.)

I sketched my scenario in this jsFiddle.

Is there any way to nest block elements inside inline elements in a HTML5 conform way? I could imagine an element that switches from inline to block context but will, by default, not be displayed; I just don’t know such an element.

Any help is appreciated.

PS: I know that JavaScript is capable of handling my example, but my solution has to be plain HTML+CSS.

Answer 1

For content of that nature, you shouldn’t be using <h[1-6]>. Use <header> instead.