webdevlinux - logo Web Dev Linux

Nesting HTML Lists

Nesting HTML lists is another name for making lists of lists. In other words, Lists inside another list. You will understand how can be nesting a list in an HTML document.

Nesting HTML Lists Nesting Lists

Look at the below example of nesting lists

FILE : nesting-lists.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Nesting HTML Lists</title>
</head>
<body>
<!-- nesting unordered lists -->
<ul>
	<li>Vehicles
		<ul>
			<li>Car</li>		
			<li>Van</li>		
		</ul>	
	</li>
</ul>

<!-- ordered lists inside an unordered list -->
<ul>
	<li>Sunday
		<ol>
			<li>Wash Cloths</li>		
			<li>Wash Vehicle</li>		
		</ol>	
	</li>
	<li>Monday
		<ol>
			<li>Getup</li>	
			<li>Get ready</li>	
			<li>Go to work</li>	
		</ol>	
	</li>
</ul>

<!-- nesting ordered lists -->
<ol>
	<li>Main List
		<ol type="a">
			<li>Sub list
				<ol type="i">
					<li>Item 1</li>				
					<li>Item 2</li>				
				</ol>			
			</li>		
		</ol>	
	</li>
</ol>

</body>
</html>

Important

Keep in mind that the nested list must be placed only inside a list item ( only inside a li element ) of the parent element.

This is an example for wrong nesting.

<ol>
 <ul>
  <li>Sub item</li>
 </ul>
</ol>

This is an example of correct nesting.

<ol>
  <li>
    <ul>
      <li>Sub item</li>
    </ul>
  </li>
</ol>

You can have any type of list inside another type of list according to the relevancy. There is not a limit of nesting depth.