For an example
Is <a href="#"><h1>Heading</h1></a>
valid in HTML5?
An element that is inline elements should not contain block elements. Block elements can contain block and/or inline elements while inline elements can only contain other inline (including inline-block , such as <img> ) elements.
Generally, block-level elements may contain inline elements and (sometimes) other block-level elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.
Generally, inline elements may contain only data and other inline elements. An exception is the inline a element which may contain block level elements such as div .
But yes, inline elements within block elements are great, but block elements within inline elements shouldn't be used.
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..
Tip: if using this set the <a>
to display: block;
or there may be unintended visual styling results : Source: Test Case
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With