Designing with Nested HTML Lists - Using nested HTML lists
(Page 2 of 4 )
To be frank, building a nested HTML list is a no-brainer process that can be tackled with minor hassles even by inexperienced web designers. Basically, the process requires only that you include a new list within one or more items of the parent element, in this manner achieving a nested structure.
However, it's necessary to clarify this concept a bit further, so let me show you a functional example that illustrates how to build a basic nested HTML list. Thus, take a look at the following code sample, which constructs this web page element. Here it is:
<!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 nested HTML lists</title>
</head>
<body>
<h1>Example on building nested HTML lists</h1>
<ul>
<li>List Item 1</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</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
<li>List Item 7</li>
<li>List Item 8</li>
<li>List Item 9</li>
<li>List Item 10</li>
</ul>
</body>
</html>
Undeniably, the above practical example is so easy to grasp that it speaks for itself. As you can see, in this case, one parent unordered list has been included into a sample web document, and a child list has been hung from one of the parent's items. Obviously, the result of this process is a nested list that implements a primitive hierarchical structure.
In addition, to complement the previous explanation, I've included a screen capture below that shows how this sample nested HTML list is displayed on the browser. Have a look at it, please:
Of course, the previous code example is extremely simplistic, so you shouldn't have major problems understanding how it functions. However, it's helpful for demonstrating how easy it is to build a simple nested HTML list that contains only one subgroup of items.
Therefore, now that you've hopefully grasped the logic that drives the construction of nested HTML lists, it's time to see how to create more complex structures with these web page elements. For instance, it would be illustrative to include a couple of additional sub lists within the parent list, so you can see how more complicated nested lists can be created with minor hassles.
Considering that you're interested in learning how to accomplish this, in the section to come I'll be coding a brand new example to show how to hang multiple sub lists within the same parent.
As usual, click on the link that appears below and read the following segment.
Next: Coding multiple sub lists >>
More HTML Articles
More By Alejandro Gervasio
