473,321 Members | 1,667 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,321 software developers and data experts.

Correct nesting of UL, OL, LI elements

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 '07 #1
6 2618
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)
Feb 16 '07 #2
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 '07 #3
st**************@gmail.com 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/
Feb 16 '07 #4
On Feb 16, 4:18 pm, stephen.cunli...@gmail.com 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.

Feb 16 '07 #5
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 '07 #6
<st**************@gmail.comwrote:
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.

Feb 19 '07 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: Bill C | last post by:
I'm new to this so... Is it possible to create a well formed schema with child elements or do I some how have to use xslt to nest elements within elements to produce my final xml result set. My...
3
by: Michael Hertz | last post by:
I have hundreds of samples of XML documents on my harddisc. But all of them lack the one or another feature of XML. Some XML documents have no attributes some others are rather flat (nesting...
1
by: martin mollema | last post by:
I'm stuck with the following problem: I want to develop a namespace that consists of two (later possibly more distinct namespaces) These subnamespaces are the DC element set and a private...
4
by: jetobe | last post by:
Hi everyone, I am trying to debug someone's site which has <h3><a href="www.legislation.qld.gov.au">Queensland Acts</a></h3> The problem is that the <a> tag is taking precedence and...
8
by: Harlan Messinger | last post by:
I just read the note under the XHTML spec (http://www.w3.org/TR/xhtml1/#h-4.9) that explains how XML DTD notation doesn't provided for the exclusion of elements from containment by the element...
4
by: Henk | last post by:
Hi group! What is the use of nesting DIV's? Henk
3
by: lawrence | last post by:
This is a follow up question to the conversation that started here: http://groups.google.com/groups?hl=en&lr=&safe=off&selm=da7e68e8.0410010901.18a813c9%40posting.google.com I tried nesting...
3
by: shaun roe | last post by:
I have a document about 4 levels deep and in my XSLT I want to generate a unique string ID for each basic element based on its path through the hierarchy. If I use recursion, I am continually...
3
by: Philipp Schumann | last post by:
Hi, I have several nested layers of <node> element that are processed by an XSLT template. Is there any possibility to determine the depth of a node in the overall nesting hierarchy? For...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.