Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

For an example

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

like image 698
Jitendra Vyas Avatar asked May 19 '11 16:05

Jitendra Vyas


People also ask

Can you have block elements inside inline elements?

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.

Do block level elements stay inline with other 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.

What types of elements can be inside an inline element?

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 .

Can inline statements be nested inside block elements?

But yes, inline elements within block elements are great, but block elements within inline elements shouldn't be used.


1 Answers

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.

like image 162
clairesuzy Avatar answered Oct 06 '22 09:10

clairesuzy