473,320 Members | 1,933 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,320 software developers and data experts.

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

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 <ulfor the nested list should not be there.
Removing the </liimmediately prior to the nested <ulsorts 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 </liimmediately 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 </libefore 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>

Mar 31 '07 #1
7 3613
Els
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 <ulfor the nested list should not be there.
iCab is correct.
Removing the </liimmediately prior to the nested <ulsorts 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 </liimmediately 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 </libefore 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 </liafter the nested <ul>?
A nested list, is a child of a list item.
--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
Mar 31 '07 #2
On Mar 31, 2007 Els wrote:
See the closing </liafter the nested <ul>?
A nested list, is a child of a list item.
Thank you. I didn't notice the closing </liafter nested <uland that's
where I went wrong :)

It seems that the nested <ulis a child of the <lias 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>

Mar 31 '07 #3
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 </libefore 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
Mar 31 '07 #4
Els <el*********@tiscali.nlwrote:
news: k7****************************@40tude.net
patrick j wrote:
[snip]
>Removing the </liimmediately prior to the nested <ulsorts this
out, so iCab is happy with what is below:
[snip]
>But it doesn't seem to make sense to leave out that </libefore 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*

Mar 31 '07 #5
Els
BootNic wrote:
As a side note, the li start tag is required, the end tag: optional.

http://www.w3.org/TR/html401/struct/lists.html
In HTML, yes. In XHTML, no.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
Mar 31 '07 #6
patrick j wrote:
</ul
Fix this first.

</ul>
Mar 31 '07 #7
On 31 Mar, 12:29, patrick j <usemywebs...@googlemail.comwrote:
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, <por another nested
<ulneeds 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 <ulis <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. <uljust 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 </liare (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>

Apr 2 '07 #8

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

Similar topics

8
by: Michael | last post by:
This is a two-part question to which I haven't been able to find an answer anywhere else. 1. Is it possible to format the bullet/number character of the <li>? In my styles sheet, I have the <li>...
8
by: Udo Marx | last post by:
Hello to ciwas! Is there a way to change the bullet form, color, etc, of the element <li> under<ul> via css? Any reply will be appreciated. -- Freundliche Gruesse, Netzteil - Udo Marx...
4
by: Matt | last post by:
Hi, Got an unordered list with 100% width, with 5 list items of 20% width styled to fill the width of the container element. Renders fine in Mozilla, but when you change the size of the window...
4
by: Mark | last post by:
Hopefully I 'm missing something silly, but I can't find an easy way to loop all list items in a simple <ol>. I was hoping a for loop as shown below would be enough, however clicking "alert all" in...
5
by: Joakim Braun | last post by:
I'd like to show tree structures using collapsible multi-level nested <ul> lists (with open/closed "disclosure triangles" as list-style-images). Something like this: <ul> <li...
4
by: abs | last post by:
Anybody has an idea how to get the <ul> element which is not nested in <li> element ? In other words I have several lists like this: <ul id="1"> <li>Aaaaaaaa</li> <li>Bbbbbbbb</li>...
2
by: Andrew Donaldson | last post by:
I'd welcome some help in understanding what's going on with graphical browsers in the navigation list at: http://www.bounceandtickle.org.uk/index.html (This site is not about what it might...
3
by: ajay2552 | last post by:
Hi, I have a query. All html tags start with < and end with >. Suppose i want to display either '<' or '>' or say some text like '<Company>' in html how do i do it? One method is to use &lt,...
9
by: eros | last post by:
<li>List <ul> <li>List1</li> <li>List2</li> <li>List3</li> </ul> </li> How to call the php code from that html tags... when I click List1?
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
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: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
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: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
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.