Correct nesting of UL, OL, LI elements

[stephen.cunliffe]

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.

 

[Evertjan.]

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.

 

[stephen.cunliffe]

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.

 

[Martin Honnen]

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.

 

[Richard Cornford]

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.

 

[stephen.cunliffe]

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.

 

[Richard Cornford]

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.