3

I have the idea that placing a block under the inline is incorrect. However while building a tree structure we use ul under li. Could anyone please explain why this is a valid html?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
user3115056
  • 1,266
  • 1
  • 10
  • 25
  • `li` elements are `block` by default. Even if you change them to `inline` using CSS, it's valid HTML to add block elements as their children. – Rick Hitchcock Jul 23 '15 at 15:30

1 Answers1

0

The default display value for the li property is not inline, it's list-item. And a ul is designed to be nested in a list, so there's no problem with placing a ul within an li.

Furthermore, as of HTML5, placing block elements inside inline elements is valid HTML.

From MDN:

The distinction of block-level vs. inline elements is used in HTML specifications up to 4.01. In HTML5, this binary distinction is replaced with a more complex set of content categories. The "block-level" category roughly corresponds to the category of flow content in HTML5, while "inline" corresponds to phrasing content, but there are additional categories.

If, however, you don't want to put a block element within an inline element for rendering or other reasons, you have the option to change the display value:

<span style="display: block">
    <div style="display: inline"> ... </div>
</span>
Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701