Lesson 3: Nested Lists


Sometimes it is necessary to embed or nest lists within lists because there are subtopics of one or more of the list items. In this lesson you will nest a list within the parent list of required projects. The first item or unit on that list is Unit 4: Graphics. There are three tutorials for that unit, so you'll create a nested unordered list.

Learner Outcomes

At the completion of this exercise:


  1. Place your cursor after the first list item in the list of required projects. Press Enter to create space for coding the nested list.
  2. Code the nested list as the example shows below. Be careful to maintain the subordination using indentation. Note that sublists (also called "child lists") are actually part of an individual list item in the "parent list". For this reason, the list item that contains the child list is not closed with a </li> tag until after the sublist is closed.


<li>Unit Four: Graphics


<li>Evaluation of web graphics</li>

<li>GIF vs. JPEG</li>

<li>Web photo album</li>

<li>Sample buttons</li>

<li>3-D box</li>

<li>Receive instructor's approval of banner </li>



<li>Unit Five: Overall Site Design and Management


<li>Usability study report</li>

<li>Receive instructor's approval of the raw HTML list that will be turned into the navigation system</li>

<li>Receive instructor's approval of your use of an external style page</li>

<li>Receive instructor's approval as to how you're controlling the site's navigational menu with your external style sheet</li>

<li>Javascript enhancement</li>



<li>Unit Six: Intro to Web Authoring Software


<li>My Web Authoring Software</li>

<li>List of Links</li>

<li>Inserting an Image</li>

<li>Submit printed copies of reports generated by site management features in web authoring tool</li>

<li>Submit the completed Market Analysis, proposed site organization, and the sketch of the home page for review</li>

<li>Report to your instructor how your mock site measured up once the evaluation tool was applied</li>

<li>Submit copies of site management reports</li>




Now that you have a more complex list, you can see how important indenting is for keep the coding organized.

Resources/Online Documents

All done?

After you have saved the changes to index.htm, return to your browser and refresh to see the changes. Did the nested list subordinate correctly? The three tutorial items should be subordinate to the Unit Four item. Show your instructor your results before starting Module 4.