Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Correct nesting of UL, OL, LI elements

Reply
Thread Tools

Correct nesting of UL, OL, LI elements

 
 
stephen.cunliffe@gmail.com
Guest
Posts: n/a
 
      02-16-2007
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.

 
Reply With Quote
 
 
 
 
Evertjan.
Guest
Posts: n/a
 
      02-16-2007
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)
 
Reply With Quote
 
 
 
 
stephen.cunliffe@gmail.com
Guest
Posts: n/a
 
      02-16-2007
> 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.

 
Reply With Quote
 
Martin Honnen
Guest
Posts: n/a
 
      02-16-2007
http://www.velocityreviews.com/forums/(E-Mail Removed) 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/
 
Reply With Quote
 
Richard Cornford
Guest
Posts: n/a
 
      02-16-2007
On Feb 16, 4:18 pm, (E-Mail Removed) 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.

 
Reply With Quote
 
stephen.cunliffe@gmail.com
Guest
Posts: n/a
 
      02-16-2007
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.




 
Reply With Quote
 
Richard Cornford
Guest
Posts: n/a
 
      02-19-2007
<(E-Mail Removed)> 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.

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Nesting XML Elements in Java dmckeon@ameritas.com Java 10 05-01-2006 06:47 AM
Module.nesting -> Kernel#nesting Trans Ruby 10 09-16-2005 12:21 AM
Child Elements/Nesting Bill C XML 0 02-26-2004 04:48 PM
correct or not correct? Dan HTML 7 10-02-2003 10:16 PM
To correct my program. please, check to find errors and correct me. joon Java 1 07-08-2003 06:13 AM



Advertisments