Designing with Nested HTML Lists - Coding multiple sub lists
(Page 3 of 4 )
If you found it easy to build nested HTML lists that included only one sub list, then it's possible that you will grasp the following code sample in a snap. As I anticipated in the previous section, it's extremely simple to create nested lists that contain multiple sub lists. You can see this technique implemented frequently when surfing the web.
However, this is merely boring theory. It's time to use a functional example to demonstrate how to build a multiple nested HTML list. Here's how the example in question looks:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example on building multiple nested HTML lists</title>
</head>
<body>
<h1>Example on building multiple nested HTML lists</h1>
<ul>
<li>List Item 1
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
<li>List Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
<li>List Item 3
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
<li>List Item 5
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
<li>List Item 6
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
<li>List Item 7
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
<li>List Item 8
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
<li>List Item 9
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
<li>List Item 10
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>>
</li>
</ul>
</body>
</html>
That's not rocket science, right? As shown above, the prior nested HTML list has been built simply by adding a few sub lists to the parent <ul> element. It's that easy, really. In addition, since I want to keep things rather simple for now, each item of the nested list has only one sub-level, but logically this hierarchical structure can be extended, to let you create as many sub-levels as necessary.
Additionally, below I included a complementary image that shows clearly how the previous nested HTML list is rendered on the browser:
So far, so good. At this stage you hopefully understand how to build a nested list that contains multiple sub lists. So, as I said before, it's perfectly feasible to extend this initial hierarchical structure and construct a list with more sub levels.
Therefore, the last section of this tutorial will be focused on building a nested HTML list that will include multiple sub-levels. However, to see how this will be achieved, you'll have to click on the link below and keep reading.
Next: Building a nested HTML list with multiple sub-levels >>
More HTML Articles
More By Alejandro Gervasio
