Are block-level elements allowed inside inline-level elements in HTML5?

Jitendra Vyas picture Jitendra Vyas · May 19, 2011 · Viewed 9.5k times · Source

For an example

Is <a href="#"><h1>Heading</h1></a> valid in HTML5?

Answer

clairesuzy picture clairesuzy · May 19, 2011

yes what you've written is valid in HTML5, but it's not all inline elements, I think it's just <a> 's it applies to..

Reference: “Block-level” links in HTML5

Tip: if using this set the <a> to display: block; or there may be unintended visual styling results : Source: Test Case

Update:

It is "disallowed" for other "block in inline" combinations where "default styles are likely to lead to confusion" - explanation is here:

Cases where the default styles are likely to lead to confusion

Certain elements have default styles or behaviors that make certain combinations likely to lead to confusion. Where these have equivalent alternatives without this problem, the confusing combinations are disallowed.

For example, div elements are rendered as block boxes, and span elements as inline boxes. Putting a block box in an inline box is unnecessarily confusing; since either nesting just div elements, or nesting just span elements, or nesting span elements inside div elements all serve the same purpose as nesting a div element in a span element, but only the latter involves a block box in an inline box, the latter combination is disallowed.