You are here : Home - Web Development - HTML - Nested Lists

---

Nested Lists

---

Validating your page when using nested list items requires proper tag structure. It seems obvious but it can be difficult to spot.

The correct structure for lists is as folows

<ul> 
    <li>item</li> 
    <li>item</li> 
</ul>

Which looks like this.

• item
• item

Now if you want something like this.

• item
  • sub item
  • sub item
• item

Heres the code.

<ul> 
    <li>item 
        <ul> 
            <li>sub item </li> 
            <li>sub item </li> 
        </ul>     
    </li> 
     
    <li>item</li> 
</ul>

Note that for the sub item list that you have to nest it within the <li> </li> tags.

There are other ways of doing it to get it looking right on the webpage but none of them will validate. If your tags have a valid structure the chances are it won't cause problems in other browsers.

See this page about closing tags.

---

Search
	[ Web] [ WebDevTips]

---

[back to top of page]   

[] []