Your Ad Here

Creating Nested Lists IN HTML


In the preceding Tip, you learned the how to create ordered and unordered lists. You can also create
an ordered or unordered list within another list; that is, you can create a nested list. You might use a
nested list to display a set of actions that are important to a specific step in the outer list, as shown here:
Step 3 of the list shown requires more explanation than a simple, “Load the Program”
statement. Therefore, you might insert a nested list to describe the steps necessary to load
the program. The following HTML code describes the insertion of the nested list shown previously:
<html>
<head>
<title>Example of Ordered List</title>
</head>
<body>
<h2>Program Load</h2>
<ol>
<li>Insert CD into Computer</li>
<li>Click the Start Icon</li>
<li>Load the Program</li>
<ol type="a">
<li>Double-click the game icon</li>
<li>Enter serial number</li>
<li>Click the Finish button</li>
</ol>
<li>Play the Game<</li>
</ol>
</body>
</html>
In this example, the nested list is an ordered list defined by start and end ordered list tags (<ol>
</ol>). The ordered list is nested, because the start and end ordered list tags (<ol></ol>) occur within
(that is, are nested in) an outer set of start and end ordered list tags(<ol></ol>). (The text phrases
between the start and end list item tags [<li></li>] appear onscreen as the items in each list [both
outer and nested]).
Although the coding of a nested list may appear complicated, you follow the same rules when
creating a nested list as when creating the outer list. Define the nested list between a set of start and
end ordered list tags (<ol></ol>) or between a set of start and end unordered list tags (<ul></ul>).
Then add items to the nested list by inserting text between sets of start and end list item tags (<li> </li>)
you inserted after the definition for a list item in the outer list. Keep in mind that you can nest both
ordered lists and unordered lists in an outer list (which may be an ordered list or an unordered list).

0 comments:

Post a Comment

Popular Posts

Recent posts