Search code examples
htmltags

Is li tag in html a inline-level or block-level element?

I really wonder is a li tag in HTML a inline-level or block-level element?

I find that a li tag in a p tag can break a new line, so it's kind of like a block, but it's embedded in a ul tag or a ol tag.

From this point of view, it's kind of like a inline-level element? Which is right?

Solution

  • NOTE: This is intentionally invalid markup to prove a point about block context.

    <!DOCTYPE html>
<html>
  <body>
    <div style="background-color:black;color:white;padding:20px;">
      <p>
        <ul>
          <li>Hello</li>World
        </ul>
        Sagar 
      </p>
    </div> 
  </body>
</html>

    The W3School Definition of Inline and Block Element Stands as follows:

    1. An inline element does not start on a new line and only takes up as much width as necessary.
    2. A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

    As you can see in the example above, even though I typed "Hello" inside of the li tag and immediately followed it with "World", the single li tag will not allow the "World" to be on the same line. This demonstrates that the li tag is taking 100% of the available width, proving that li is a block level element.

    That is my point of view.