Correct nesting of UL, OL, LI elements

Discussion in 'Javascript' started by stephen.cunliffe@gmail.com, Feb 16, 2007.

  1. Guest

    Hi,

    I'm looking for opinion/facts/arguments on the correct nesting of UL,
    OL, & LI elements.

    For example, this is what I want (unordered list):

    * Item 1
    * Item 2
    * Item 3
    * Item 3a
    * Item 3b
    * Item 3c
    * Item 4

    Now, in my markup, I can do (A) or (B), and they both work.

    <!-- Markup (A) -->
    <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <ul>
    <li>Item 3a</li>
    <li>Item 3b</li>
    <li>Item 3c</li>
    </ul>
    <li>Item 4</li>
    </ul>


    <!-- Markup (B) -->
    <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3
    <ul>
    <li>Item 3a</li>
    <li>Item 3b</li>
    <li>Item 3c</li>
    </ul>
    </li>
    <li>Item 4</li>
    </ul>


    Now, I prefer, and think that Markup A, is the better representation
    of the data... but... I can't find a spec, that dictates which one is
    "officially" correct... (due in part to the fact that in old HTML
    days, the closing tags were not needed... thus the confusion as to
    "where" that closing tag goes, when nesting)

    This gets very interesting in the JS/CSS world, trying to deal with
    this...

    If I generate Markup A, then get a reference to the LI element for
    "Item 3", called say... foo then I ask for foo.followingSibling, in
    Mozilla, I get as expected, the UL element, but in IE, I get the LI
    for "Item 4"... IE "moves" the UL node, to the .lastChild position of
    the preceding LI element.

    So, here's the questions...

    1.) Which method (by vote, spec or whatever) is correct/better?
    Method A or B?

    2.) Based on (1), is the IE implementation a Bug, or a Feature?
    Mozilla's?

    3.) If you want to style the sub items, what CSS would you use for
    Method A, or B... or does it matter?

    PS I don't expect a unanimous answer to any of these, I'm just trying
    to get a feel for how everyone else interprets how Nested Lists are
    "supposed" to work.
    , Feb 16, 2007
    #1
    1. Advertising

  2. Evertjan. Guest

    wrote on 16 feb 2007 in comp.lang.javascript:

    > I'm looking for opinion/facts/arguments on the correct nesting of UL,
    > OL, & LI elements.


    This has nothing to do with Javascript.

    Please go elswhere.

    I would suggest you search fot a html NG.

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
    Evertjan., Feb 16, 2007
    #2
    1. Advertising

  3. Guest

    > This has nothing to do with Javascript.

    Well, actually it does, because IE is creating a DOM, that doesn't
    reflect my markup. What I want to know, is should I change my
    markup?... just deal with the difference programatically, or is this
    something that the MS developers should look at fixing... e.g. if the
    markup is in format A, then the DOM reflects so, if it is in format B,
    then the DOM should reflect this also.

    It was in the JavaScript, that I found the behaviour difference, and
    thus I posted here. In an HTML forum, I likely wouldn't find the same
    talent as here. Many people can code HTML, less can do JavaScript.
    , Feb 16, 2007
    #3
  4. wrote:

    > For example, this is what I want (unordered list):
    >
    > * Item 1
    > * Item 2
    > * Item 3
    > * Item 3a
    > * Item 3b
    > * Item 3c
    > * Item 4
    >
    > Now, in my markup, I can do (A) or (B), and they both work.
    >
    > <!-- Markup (A) -->
    > <ul>
    > <li>Item 1</li>
    > <li>Item 2</li>
    > <li>Item 3</li>
    > <ul>
    > <li>Item 3a</li>
    > <li>Item 3b</li>
    > <li>Item 3c</li>
    > </ul>
    > <li>Item 4</li>
    > </ul>


    Look into the HTML specification what elements are allowed as child
    elements of ul elements:
    <http://www.w3.org/TR/html4/struct/lists.html#h-10.2>
    That shows that only li elements are allowed as children of ul (and ol)
    elements so what you have above is not valid HTML 4.
    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
    Martin Honnen, Feb 16, 2007
    #4
  5. On Feb 16, 4:18 pm, wrote:
    > I'm looking for opinion/facts/arguments on the correct nesting
    > of UL, OL, & LI elements.


    The HTML specification is the place to look for facts, and arguments
    about it are best sought in a mark-up newsgroup.

    > For example, this is what I want (unordered list):
    >
    > * Item 1
    > * Item 2
    > * Item 3
    > * Item 3a
    > * Item 3b
    > * Item 3c
    > * Item 4
    >
    > Now, in my markup, I can do (A) or (B), and they both work.


    This is "work" in one of the looser senses of the word.

    > <!-- Markup (A) -->
    > <ul>
    > <li>Item 1</li>
    > <li>Item 2</li>
    > <li>Item 3</li>
    > <ul>
    > <li>Item 3a</li>
    > <li>Item 3b</li>
    > <li>Item 3c</li>
    > </ul>
    > <li>Item 4</li>
    > </ul>
    >
    > <!-- Markup (B) -->
    > <ul>
    > <li>Item 1</li>
    > <li>Item 2</li>
    > <li>Item 3
    > <ul>
    > <li>Item 3a</li>
    > <li>Item 3b</li>
    > <li>Item 3c</li>
    > </ul>
    > </li>
    > <li>Item 4</li>
    > </ul>
    >
    > Now, I prefer, and think that Markup A, is the better
    > representation of the data... but... I can't find a spec,
    > that dictates which one is "officially" correct...


    That would be the HTML specification. The First is invalid as UL and
    OL may only have LI children and their opening and closing tags are
    not optional (so an opening UL/OL cannot imply the closing of an open
    UL/OL).

    > (due in part to the fact that in old HTML
    > days, the closing tags were not needed...


    Some closing tags are still not needed in HTML 4.01, and many more can
    be omitted in reality (with inconsistent consequences).

    > thus the confusion as to
    > "where" that closing tag goes, when nesting)
    >
    > This gets very interesting in the JS/CSS world, trying to
    > deal with this...


    Structurally valid mark-up results in the creation of structurally
    consistent, and predictable, DOMs. Error correcting invalid mark-up
    does not. It is easier to script a document when the DOM being
    scripted is of a predictable structure, so for scripting documents
    should be structurally valid (which is true of all formally valid HTML
    documents).

    > If I generate Markup A, then get a reference to the LI
    > element for "Item 3", called say... foo then I ask for
    > foo.followingSibling,


    You mean - foo.nextSibling -?

    > in Mozilla, I get as expected, the UL element, but in IE,
    > I get the LI for "Item 4"... IE "moves" the UL node, to
    > the .lastChild position of the preceding LI element.


    And the next browser you try will likely do something else again.

    > So, here's the questions...
    >
    > 1.) Which method (by vote, spec or whatever) is correct/better?
    > Method A or B?


    By spec, A is invalid and B is valid.

    > 2.) Based on (1), is the IE implementation a Bug, or a Feature?
    > Mozilla's?


    Both are features. No specification could mandate how error-correction
    is handled (if it is at all) and so however it is handled (or not)
    cannot be criticised as incorrect; there is no definition of 'correct'
    to measure against.

    > 3.) If you want to style the sub items, what CSS would you
    > use for Method A, or B... or does it matter?


    CSS that relies on DOM parent/child/descendant/sibling relationships
    may be heavily affected by inconsistent DOM structures being created
    following the use of structurally invalid mark-up.

    > PS I don't expect a unanimous answer to any of these, I'm
    > just trying to get a feel for how everyone else interprets
    > how Nested Lists are "supposed" to work.


    If you don't interpret the required nesting by the HTML specification
    then you will be shooting yourself in the foot as soon as you start
    attempting to script the resulting DOM.

    Richard.
    Richard Cornford, Feb 16, 2007
    #5
  6. Guest

    Richard,

    Thanks for your reply, what I missed in reading the DTD/spec, was the
    "*" on the LI element, wher *=any element (I presume.. which would
    include another UL)

    I'm not sure how I missed that, but that explains it all for me now.
    , Feb 16, 2007
    #6
  7. <> wrote:
    > Thanks for your reply, what I missed in reading the DTD/spec,
    > was the "*" on the LI element, wher *=any element (I presume..
    > which would include another UL)


    No, the "*" means zero or more occurences.

    > I'm not sure how I missed that, but that explains it all
    > for me now.


    Unlikely. It seems like some information on the interpretation of DTDs
    would be useful to you. I cannot recommend any URL as mine is all on
    paper.

    Richard.
    Richard Cornford, Feb 19, 2007
    #7
    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. joon
    Replies:
    1
    Views:
    511
    Roedy Green
    Jul 8, 2003
  2. Replies:
    10
    Views:
    902
    hereticmessiah
    May 1, 2006
  3. Dan

    correct or not correct?

    Dan, Oct 2, 2003, in forum: HTML
    Replies:
    7
    Views:
    434
  4. Bill C

    Child Elements/Nesting

    Bill C, Feb 26, 2004, in forum: XML
    Replies:
    0
    Views:
    374
    Bill C
    Feb 26, 2004
  5. Trans
    Replies:
    10
    Views:
    288
    Sean O'Halpin
    Sep 16, 2005
Loading...

Share This Page