mikeage.net Logo
mikeage.net/2005/08/12/nested-lists-in-xhtml/

mikeage.net @ ו׳ תמוז תשע״ח

Nested Lists in XHTML

Quick Overview

If you want to nest lists in HTML, you probably did something like the following (although you may not have done the indenting)

&lt;ul&gt;<br />
&nbsp;&nbsp;&lt;li&gt;List Item 1&lt;/li&gt;<br />
&nbsp;&nbsp;&lt;ul&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Sublist Item 1&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Sublist Item 2&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Subsublist Item 1&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Sublist Item 3&lt;/li&gt;<br />
&nbsp;&nbsp;&lt;/ul&gt;<br />
&nbsp;&nbsp;&lt;li&gt;List item 2&lt;/li&gt;<br />
&nbsp;&nbsp;&lt;li&gt;List Item 3&lt;/li&gt;<br />
&lt;/ul&gt;<br />

In XHTML, this is not valid (the w3 validator will complain about "document type does not allow element "ul" here; assuming missing "li" start-tag". The reason is that an nested &lt;ul&gt; belongs within an &lt;li&gt; tag. You might worry that this would put a higher level bullet on the sublist-- it doesn't. The key is you don't close the &lt;li&gt; tag from the previous entry until after the sublist finishes. Compare the following. (note that both are syntactically correct XHTML)

Code Output
&lt;ul&gt;<br />
&lt;li&gt;List Item 1<br />
&lt;ul&gt;<br />
&lt;li&gt;Sublist Item 1&lt;/li&gt;<br />
&lt;li&gt;Sublist Item 2<br />
&lt;ul&gt;<br />
&lt;li&gt;Subsublist Item 1&lt;/li&gt;<br />
&lt;/ul&gt;&lt;/li&gt;<br />
&lt;li&gt;Sublist Item 3&lt;/li&gt;<br />
&lt;/ul&gt;&lt;/li&gt;<br />
&lt;li&gt;List item 2&lt;/li&gt;<br />
&lt;li&gt;List Item 3&lt;/li&gt;<br />
&lt;/ul&gt;<br />
  • List Item 1
    • Sublist Item 1
    • Sublist Item 2
      • Subsublist Item 1
    • Sublist Item 3
  • List item 2
  • List Item 3
Versus
&lt;ul&gt;<br />
&lt;li&gt;List Item 1&lt;/li&gt;<br />

&lt;li&gt;&lt;ul&gt;<br />
&lt;li&gt;Sublist Item 1&lt;/li&gt;<br />
&lt;li&gt;Sublist Item 2&lt;/li&gt;<br />
&lt;li&gt;
&lt;ul&gt;<br />
&lt;li&gt;Subsublist Item 1&lt;/li&gt;<br />
&lt;/ul&gt;&lt;/li&gt;<br />
&lt;li&gt;Sublist Item 3&lt;/li&gt;<br />
&lt;/ul&gt;&lt;/li&gt;<br />
&lt;li&gt;List item 2&lt;/li&gt;<br />
&lt;li&gt;List Item 3&lt;/li&gt;<br />
&lt;/ul&gt;<br />

  • List Item 1
    • Sublist Item 1
    • Sublist Item 2
      • Subsublist Item 1
    • Sublist Item 3
  • List item 2
  • List Item 3

Enjoy.

Leave a Reply

Quick Map
Content +
Personal +
Archives +
Site Stuff +
RBS Weather +
Search +
Recent Images

Valid XHTML 1.1!
Screen Pge
 

Last Modified: September 04, 2006 @ 02:11 CST

Memory(TRUE): 4194304/4194304
Memory(FALSE): 2998616/3008600