mikeage.net Logo
mikeage.net/tag/lists/

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

Posts Tagged ‘Lists’

Nested Lists in XHTML

‍‍ז׳ מנחם אב תשס״ה - Friday, August 12th, 2005

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.

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

Valid XHTML 1.1!
Printer Friendly Page
 

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

Memory(TRUE): 4194304/4194304
Memory(FALSE): 2982024/2992008