Does the <li> tag always have to be nested within the <ul> tag?

Question

Does the <li> tag always have to be nested within the <ul> tag?

Answer

The <li> element can be a direct child of either the <ul> or the <ol> elements but it should never exist outside of either of these parent elements.

24 Likes

the

  • tag will be placed inside the
      tag because the
    • tag mean listed items and that helps you organize your unlisted items.
    • help organize all of the items after the unlisted items.
  • 4 Likes

    what is an <ol> element?

    4 Likes

    SInce ‘ul’ is unorganised list, ‘ol’ must be organised list IMO.

    9 Likes

    ul stands for “Unordered List” and ol stands for " Ordered Lists" except that each list item is numbered.
    while li element will show the lists like this:

    • List item 1
    • List item 2
    • List item 3

    A ol element will show the lists like this:

    1. List item 1
    2. List item 2
    3. List item 3
    48 Likes

    The Living Standard also includes the <menu></menu> element, which also has LI as direct children.

    By default they are numbered from 1 to n, but we can also specify letters, lower or upper case, or Roman numerals, also upper or lower case. We can also specify the starting character.

    HTML Standard

    Scroll down that page to find UL, LI, and MENU.

    20 Likes

    I notice that I can leave aside the end tag for list items () and everything seems to work fine. Is it really necessary to type an end tag for list items?

    1 Like

    Best practices recommend including both tags; however, W3C has gone along with omitting the endtag. This also applies to paragraphs. Let the situation dictate, and keep it localized and well contained.

    4 Likes

    Hi! Why does it always have to be nested, or what would go wrong if it isn’t? I played around with the code and previews in the Elements and Structure exercise in the Introduction to HTML lectures, and figured that UL means that a list is coming up and indents the succeeding text, while LI makes a bullet point for the text. By this, if you were to create an unordered list that you wanted sitting flush with the rest of the text rather than indented, you can make a list with the LI tags, and omit the UL tag, it seems? With this, why would it be bad if we didn’t list LI tag inside of the UL tag?
    Thanks!
    Screen Shot 2020-07-02 at 10.26.23 PM|690x431

    3 Likes

    Yes we have to put

  • tag under
      or
      as it is the direct child of these elements. Without it the we can not create the list items.

  • Thank you…now I understand

    If the ending tag is not included in the code, an ending tag for that element (in this case, ul) will be added right before the end tag of the parent element’s end tag. There are some exceptions or special cases (they have to do with the html, head, body and maybe some other elements), though this is basically what is happening, based on my experience so far.

    Thus, all the elements under the <ul> that were supposed to be sibling elements with the ul element will now actually be children elements of that ul element (because if the ul element doesn’t have an end tag, it will be generated right before the end tag of the parent element).

    For example, as in the unordered list example we have:

    <div id="introduction">
      <h2>About Brown Bears</h2>
      <p>that text there</p>
      <h3>Species</h3>
      <ul>
        <li>Arctos</li>
        <li>Collarus</li>
        <li>Horribilis</li>
        <li>Nelsoni (extinct)</li>
      </ul>
      <h3>Features</h3>
      <p>that text there</p>
    </div>

    The code is written as it is recommended, and the ul element is a sibling element of the elements below it that are not nested inside it <h3>Features</h3> and <p>that text there</p> (as well as the elements above it that are nested inside that div parent element).

    If we don’t include the end tag of the ul element, the browser will usually do it for us, but according to the rule I mentioned earlier, and that might not be displaying it in the way we intended it to be.

    So, if we have

    <div id="introduction">
      <h2>About Brown Bears</h2>
      <p>that text there</p>
      <h3>Species</h3>
      <ul>
        <li>Arctos</li>
        <li>Collarus</li>
        <li>Horribilis</li>
        <li>Nelsoni (extinct)</li>
      
      <h3>Features</h3>
      <p>that text there</p>
    </div>

    The browser will automatically put the end tag of the ul right before the ending </div> tag:

    <div id="introduction">
      <h2>About Brown Bears</h2>
      <p>that text there</p>
      <h3>Species</h3>
      <ul>
        <li>Arctos</li>
        <li>Collarus</li>
        <li>Horribilis</li>
        <li>Nelsoni (extinct)</li>
      
      <h3>Features</h3>
      <p>that text there</p>
      </ul> <!---->
    </div>

    This makes the h3 and p elements that were supposed to be sibling elements of ul, into child elements of the ul, regardless of our indentation (as indentation is just for us to better read the code, it doesn’t have any effect).

    Furthermore, the ul element (as well as the ol element) usually have a left padding by default (and top and bottom margins), thus the elements that accidentally end up being child elements of ul will have extra space on their left (and maybe extra space above and/or bellow them.

    Here’s the example where we place the end tag where it’s supposed to be:

    And here’s the example where we don’t place an end tag for the ul and let the browser place it where it’s programmed to place it (here, the validator also gives us a warning):

    So, to summarize, if you don’t put an ending tag for ul (and ol) where it’s supposed to be, some elements might be spaced more than you wanted them to.

    4 Likes

    why does the “li” have to be nested in “ol” and “ul”?

    That’s because ‘ul’, ‘ol’ and ‘menu’ elements only provide semantic meaning. They indicate to the browser that there’s an unordered list, an ordered list or a menu but for the actual list to have content you need ‘li’ element which stands for ‘list item’. If you put raw text inside an ‘ul’, ‘ol’ or ‘menu’ element, it will be treated the same as a paragraph (minus the semantic meaning).

    HTML Standard - li element

    Read this post to clear your doubts! → What happens if we put raw text directly in the <ul> element? - #9 by mtf