Lesson 1: Unordered Lists


The most common HTML lists are either ordered lists <ol> or unordered lists <ul>. Ordered lists are typically displayed with numbers, while unordered lists are typically displayed with bullets. In this lesson you will use HTML to create an unordered list for organizing some of the content on your portfolio's home page. This list will contain links to the pages for each unit you created earlier. Eventually you will create two lists (one of each type) and you will learn to use CSS to align the two lists side by side, but for now the lists will be in one column aligned to the left of the page (left aligned is the default setting so there is nothing you'll need to code.).

Learner Outcomes

At the completion of this exercise:


  1. Place your cursor beneath the last code you wrote in the previous lesson. Type the title for the first list, Required Projects. Contain this title in <h3> tags. It should look like this: <h3>Required Projects</h3>
  2. On the next line, type the unordered list tag <ul>. Press Enter twice on your keyboard to make an empty line for more code. Close the unordered list .
  3. Move the cursor up to the empty space and type the tags for containing list items: <li></li>. Press Enter again and type the list item tags. There will be three items in the list, so repeat this process one more time. Each list item represents one of the units you will be working on eventually. Enter the text between the <li> tags as it appears in the example below:


<li>Unit Four: Graphics</li>

<li>Unit Five: Overall Site Design and Management</li>

<li>Unit Six: Intro to Web Authoring Software</li>


Indenting the <li> tags helps keep the coding organized but will not alter how the list appears in a browser.

Resources/Online documents

All done?

After you have saved the changes to index.htm, return to your browser and refresh to see the changes. Are there three bulleted items in the list? Show your instructor your results before starting Lesson 2.