Please explain the difference between these two sets of code

THIS IS A CODE I SAW written by one of the coders in u tube channel .
IN both the codes output is same

<ol>
      <li>item1</li>

    <li>item2   LIST TAG not closing

             <ol>             
                    <li>item3 </li>
                    <li>item4</li>
                      <li>item5 LIST TAG not closing
                       
                                   <ol>
                                     <li>item6</li>
                                 </ol>
                       </li>
        

                 <li>item7</li>
           </ol>

    </li>
</ol>

Okay i modified the org. code and closed the list tag there only where it needed to be closed

             <ol>
                    <li>item1</li>
                    <li>item2 </li>
                        <ol>            
                             <li>item3 </li>
                              <li>item4</li>
                              <li>item5</li>
                                      <ol>
                                         <li>item6</li>
                                     </ol>

                               <li>item7</li>
                         </ol>
                </ol>

Why he did not write the second one instead of first one?
Is the first one technically wrong or
One of the problems with html (in my opinion) is that it is very forgiving of sloppy code. So it works therefore?

What is difference between his and my code?

You (and everyone else) would find it easier to understand your code if you indented your code. Of course, it’s rather difficult when you have missing opening and/or closing tags…

YOu did not copy the first Order list tag .
WHy u create complexity by creating a new post .
see i again had to go back and paste the ol tag at the top!!!

No, not even close. (No pun intended. :slight_smile: )

The code you quote is an example of lists nested in parent items.

That’s common in navigations with sub menus.

Edit) I wasn’t looking close enough on the closing tag typos. (No no, no pun intended. :slight_smile: )

Yes that is following the valid structure.

The code in your second example is invalid.

A list is made by an initial list tag (ul or ol) and then a succession of list elements only finishing with the closing ul or ol tag.

e.g. This is valid:

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

The only element that can be a direct child of a ul or an ol is a li element.

You cannot do this.

<ol>
  <li></li>
  <li></li>
  <div></div>
  <li></li>
</ol>

Or this:

<ol>
  <li></li>
  <li></li>
  <ol><li></li></ol>
  <li></li>
</ol>

Those 2 examples above are invalid.

However you can have whatever html you like inside the li tags (as long as its valid).

<ol>
  <li>
    <ol>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li>
    <div></div>
  </li>
  <li>
    <ul>
      <li></li>
    </ul>
  </li>
</ol>

Direct children of a ul or ol can only be li tags (or html comment tags). (In the same way that you can’t have a table as a direct child of a table element. Nested tables would go inside table-cells.)

Html has strict rules to follow and even though a browser will try to error correct your bad code it doesn’t make it valid. You would have found this out before posting if you had followed my advice and checked the code you post in the w3c validator before asking questions about it :slight_smile:

5 Likes

As has been explained to you twice already, if you have a different question, it needs to be a separate topic.

3 Likes

I have now indented and remove all the typos.

Then, what I said is now correct: :wink:

The code you quote is an example of lists nested in parent items.

That’s common in navigations with sub menus.

1 Like

okay this is more of a rule but there is no logic why my code is invalid

Please forgive me for sounding stupid. I think that code that breaks the rules of HTML and fails the validation tests should be considered “invalid”. I thought that PaulOB explained the rules of valid HTML lists very well and showed both valid and invalid examples.

Post your code again (without the blank lines, please) and show us why you believe that your code is “logically” valid? I am having a problem understanding your concept of “logic”.

2 Likes

Breaking HTML rules = invalid code though. Are you trying to say you believe there are elements, other than <li>, that can be direct children of <ol> or <ul> ?
https://www.w3.org/TR/REC-html40/struct/lists.html#edef-LI

2 Likes

Logic doesn’t really enter in to it. Rules are rules and are in place to create intelligent structures.

It’s like spelling words any way you want. People can still guess what you mean but the words don’t follow the rules of the language.

Html has a structure and a set of rules that apply to the elements you use. Just because you can get away with broken code doesn’t mean you should use it. Indeed a browser is well within its rights to ignore broken code and then all bets are off.

5 Likes

an OL can exist inside an LI.

You might be tripping yourself up here:

While the specification of an LI does say you can omit the ending tag (which… is weird, but the specification is weird sometimes.) of an <li>, that’s NOT what is happening here. The LI begins on line 3 (line 4 if you count the blank line) and ends on the second-to-last line of the code. It DOES close, just not on that line.

The original code has an <ol> as a child of an <li>, which is valid.
Your code has an <ol> as a sibling of an <li>, which is invalid.

4 Likes

Not really. It’s more about unambiguity, if I may reason a bit. :slight_smile:

As @PaulOB said, lists are only allowed to have list items as children (which is logical for a list). And list items can have block elements as direct children, e.g. divs and para and lists, but not another list item.

So in order to have lists working as lists, instead of breaking the rendering, a new list item will automatically close the current item and an end tag assumed (virtual inserted by the browser). So it is allowed to omit the end tag, which could be practical in case of generated content.

Another example; a paragraph is a block that can’t contain or nest block elements, so when a new block is started (e.g. a new paragraph) the current paragraph is interrupted and automatically closed, its end tag is assumed and thus allowed to be omitted. This could also be practical in cases with generated content.

Personally I believe the rule that inline and block elements should not be siblings has similar reasons; to make rendering logical for the hard working browser. :thinking:

2 Likes

Anyone can create a post on YouTube and that does not mean it is valid or correct. Please rely upon reliable sources.

I prefer to start with valid HTML and continually test until the script fails validation.

Here is a screen dump that is valid.

Please copy and paste your script into the Free W3.org validation tool and spot the differences.

As mentioned by a previous poster, if you want your script to render in all browsers then the script must abide by the rules :slight_smile:

1 Like

Yes i saw that in validator

<li>item1</li>
                    <li>item2    
                                
                                         <li>item3</li>
                                         <li>item4</li>
                                           
                  </li>

Error : No li element in scope but a li end tag seen.
is showing.

THis is another code

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>

<ol>
                    
                                                       

                                                             
                                                        
     
<li>Apples</li>


                   <li>Oranges<li>  backslash not given 



<li>GUAVA</li>
<li>MELON</li>

                                         
                                    

                                         
                            
                  
</ol>

</body>
</html>

IN css validator no error is given when it should have given a error.

OUTPUT:

  1. Apples
  2. Oranges
  3. GUAVA
  4. MELON

The second code is wrong right ?

You shouldn’t need to ask if you use the validator.

1 Like

thats because the validator is applying the “You don’t need a closing </li> between <li>” rule. Item2 ends at the end of the line, and then after item 4, there is a </li> that has no matching <li>.

Note that that’s only true because items 3 and 4 were not in their own separate list.

was more about readability, if you ask me. If the goal is to make it ‘logical’, and reduce load on the ‘hard working browser’… you’d enforce an end tag, and that way the browser doesn’t have to think about ‘do i need to forcibly insert an end tag here to make it make sense’… just my view, though.

2 Likes

No an end tag for list element is optional if the next element is another list tag.

https://html.spec.whatwg.org/multipage/syntax.html#optional-tags

An li element’s end tag may be omitted if the li element is immediately followed by another li element or if there is no more content in the parent element.

In fact the browser will insert that closing tag automatically for you as can be seen in devtools.

That doesn’t mean that its good practice to omit them because that just makes for messy code and its hard to spot errors in messy code. There are rules to follow but there are also best practices to follow to make your coding more robust.

As I said before I would prefer that html was more strict with its format but it does have a formal set of rules that it follows.

3 Likes

actually backslash not given - this was a comment .
I saw in dev tools . Yes the html parser is automatically inserting a backslash in the closing tag of li of item Oranges and then creating another data item which is no 4 with a blank data item.

It is doing one extra thing . It should not be creating another li item but i think thats the way html parser makes sense of sloppy code.