The </li> before a nested list. Why not?

Discussion in 'HTML' started by patrick j, Mar 31, 2007.

  1. patrick j

    patrick j Guest

    Hi

    I'm wondering about lists with nested lists as one does on a Saturday
    afternoon.

    Anyway below is an example of a list with a nested list which the iCab
    browser's very useful HTML verification ability will not like:

    <ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    </ul
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    </ul>

    iCab complains that the <ul> for the nested list should not be there.
    Removing the </li> immediately prior to the nested <ul> sorts this out, so
    iCab is happy with what is below:

    <ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a>
    <ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    </ul
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    </ul>

    I notice that at the rather excellent Max Design tutorials on lists they
    leave out the </li> immediately prior to a nested list.

    You can see this here:

    <http://css.maxdesign.com.au/listamatic2/vertical01.htm>

    So it would suggest it's not just the iCab verification system that doesn't
    like it.

    But it doesn't seem to make sense to leave out that </li> before the nested
    list.

    I'd be grateful if someone could explain why it is so?

    Thank you :)



    --
    Patrick - Brighton, UK
    If you wish email me from my web-site: <http://www.patrickjames.me.uk>
    Inventory service in Sussex: <http://www.inventoryworks.co.uk>
    patrick j, Mar 31, 2007
    #1
    1. Advertising

  2. patrick j

    Els Guest

    patrick j wrote:

    > Anyway below is an example of a list with a nested list which the iCab
    > browser's very useful HTML verification ability will not like:
    >
    > <ul>
    > <li><a href="#">link</a></li>
    > <li><a href="#">link</a></li>
    > <li><a href="#">link</a></li>
    > <ul>


    Oops! Bad code :)

    > iCab complains that the <ul> for the nested list should not be there.


    iCab is correct.

    > Removing the </li> immediately prior to the nested <ul> sorts this out, so
    > iCab is happy with what is below:

    [snip]
    > <li><a href="#">link</a>
    > <ul>
    > <li><a href="#">link</a></li>

    [snip]
    > </ul
    > <li><a href="#">link</a></li>


    If iCab likes that, it's missing a spot..

    > I notice that at the rather excellent Max Design tutorials on lists they
    > leave out the </li> immediately prior to a nested list.


    No, they don't leave it out - they place it in the right place.

    > You can see this here:
    >
    > <http://css.maxdesign.com.au/listamatic2/vertical01.htm>


    Exactly. That's correct code :)

    > So it would suggest it's not just the iCab verification system that doesn't
    > like it.


    True.

    > But it doesn't seem to make sense to leave out that </li> before the nested
    > list.


    It does. The nested ul is not nested if it's not inside the <li>
    element.
    The correct code is:
    <ul>
    <li>....</li>
    <li>....
    <ul>
    <li>...</li>
    <li>...</li>
    </ul>
    </li>

    etc.

    See the closing </li> after the nested <ul>?
    A nested list, is a child of a list item.


    --
    Els http://locusmeus.com/
    accessible web design: http://locusoptimus.com/
    Els, Mar 31, 2007
    #2
    1. Advertising

  3. patrick j

    patrick j Guest

    On Mar 31, 2007 Els wrote:

    > See the closing </li> after the nested <ul>?
    > A nested list, is a child of a list item.


    Thank you. I didn't notice the closing </li> after nested <ul> and that's
    where I went wrong :)

    It seems that the nested <ul> is a child of the <li> as you say. I had
    originally thought it would be a child of the not-nested <ul>.

    I learn something every day :)

    --
    Patrick - Brighton, UK
    If you wish email me from my web-site: <http://www.patrickjames.me.uk>
    Inventory service in Sussex: <http://www.inventoryworks.co.uk>
    patrick j, Mar 31, 2007
    #3
  4. patrick j

    Bergamot Guest

    patrick j wrote:
    >
    > <li><a href="#">link</a></li>
    > <ul>


    The above is invalid syntax, as any HTML validator will tell you.

    > But it doesn't seem to make sense to leave out that </li> before the nested
    > list.


    Yes, it does. As Els said, the nested list is part of the parent <li>,
    not separate from it. That's what makes it nested, not merely the
    placement of the child <ul>.

    > I'd be grateful if someone could explain why it is so?


    The reason you see so much of the invalid syntax version is because many
    "WYSIWYG" tools don't generate correct syntax for nested lists. The only
    reason it doesn't look broken on screen is because of browser error
    correction.

    --
    Berg
    Bergamot, Mar 31, 2007
    #4
  5. patrick j

    BootNic Guest

    > Els <> wrote:
    > news:
    > patrick j wrote:
    >

    [snip]
    >> Removing the </li> immediately prior to the nested <ul> sorts this
    >> out, so iCab is happy with what is below:

    [snip]
    >> But it doesn't seem to make sense to leave out that </li> before the
    >> nested list.

    [snip]

    As a side note, the li start tag is required, the end tag: optional.

    http://www.w3.org/TR/html401/struct/lists.html

    --
    BootNic Saturday, March 31, 2007 11:17 AM

    When men are pure, laws are useless; when men are corrupt, laws are
    broken.
    *Benjamin Disraeli*
    BootNic, Mar 31, 2007
    #5
  6. patrick j

    Els Guest

    Els, Mar 31, 2007
    #6
  7. patrick j

    zzpat Guest

    patrick j wrote:

    > </ul


    Fix this first.

    </ul>
    zzpat, Mar 31, 2007
    #7
  8. patrick j

    Andy Dingley Guest

    On 31 Mar, 12:29, patrick j <> wrote:

    > I'm wondering about lists with nested lists as one does on a Saturday
    > afternoon.


    Don't wonder, read the DTD and _know_.

    You can't (validly) put anything inside a <ul> (or <ol>) except
    <li>. So _anything_ you put in there, text, <p> or another nested
    <ul> needs to go inside <li>. Not "adjacent to" or "after" <li>, but
    contained wholly inside it.

    It's SGML, so closing elements are generally optional. As the parser
    "knows" that the only thing allowed inside <ul> is <li>, then it can
    assume several things about the document, even if the literal </li>
    tags have (correctly and optionally) been omitted.

    <ul><li></li><ul>...
    is clearly invalid. <ul> just can't be a child of <ul>.

    <ul><li></li><li><ul>...</ul></li>
    is valid. Containment is satisfied and the things that are children in
    the document are permitted to be children by the DTD

    <ul><li><li><ul>...</ul><li>...
    is also valid. Some </li> are (permissibly) omitted. An SGML parser
    can automatically generate a document tree from this that's equivalent
    to having parsed the following document:

    <ul>
    <li></li>
    <li>
    <ul>...</ul>
    </li>
    <li>...</li>
    </ul>
    Andy Dingley, Apr 2, 2007
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Russ Perry Jr
    Replies:
    2
    Views:
    4,103
    Russ Perry Jr
    Aug 20, 2004
  2. Mr. SweatyFinger

    why why why why why

    Mr. SweatyFinger, Nov 28, 2006, in forum: ASP .Net
    Replies:
    4
    Views:
    863
    Mark Rae
    Dec 21, 2006
  3. Mr. SweatyFinger
    Replies:
    2
    Views:
    1,763
    Smokey Grindel
    Dec 2, 2006
  4. brad
    Replies:
    2
    Views:
    408
  5. Skybuck Flying
    Replies:
    16
    Views:
    660
    tragomaskhalos
    Aug 25, 2007
Loading...

Share This Page