Lesson 1: Lists

Overview

Often when we consider the content of our web pages and ask "What is this?" the answer is: It's a list! News sites feature lists of today's top stories, sometimes organized by category. Music sites feature lists of artists or songs. Video sites feature lists of videos. Sports sights include lists of teams, lists of scores, and rankings.

If it's a list, it should be marked up as a list. There are two common types of HTML lists, those in which the order matters, and those in which it doesn't. If the order matters (as in sports rankings), we use an ordered list, which in HTML is created with the <ol> element. By default, ordered lists are displayed by browsers with each list item numbered sequentially.

If the order doesn't matter, we use an unordered list, which in HTML is created with the <ul> element. By default, unordered lists are displayed by browsers with a bullet in front of each list item .

Although lists typically show up with either numbers or bullets, they don't always. Web authors have control over this with cascading style sheets (CSS). You'll learn more about this in Unit 3.

Regardless of whether a list is ordered or unordered, the items in an HTML list are marked up with the <li> element (li stands for list item). These are container tags, so each item in the list must have an opening tag (<li>) and a closing tag (</li>)

In this lesson you will review web pages, looking for ordered and unordered lists. Then, you will create an unordered list of your own for organizing some of the content on your portfolio's home page.

Learner Outcomes

At the completion of this exercise:

Activities

  1. Browse the web, and try to find at least three ordered lists and three unordered lists. You don't need to view the source code for this activity - just try to find content that appears to be each of these types of lists. Remember that some lists won't necessarily show up with numbers or bullets, since these can be turned off or changed using CSS. Show your instructor what you found.
  2. Now return to index.html in your portfolio website. In the previous lesson, you added content to this page, which included two <div> elements that contain blocks of content, one with information about you, and one with information about your web design course. In that lesson you asked "What is this?" but that was probably before you started thinking about how many lists there are on the Web. Now when you ask that question related to the content inside your two <div> elements, you'll probably answer: It's a list! And indeed, you would be right! The first div includes a list of information about you (e.g., your name, your email, etc.). The second div includes a list of information about your school. Are these lists ordered or unordered?
  3. If you answered "unordered" to the previous question, you're right again!
  4. Go ahead and modify the content of each of the two div elements so the content is marked up as an unordered list. You will no longer need the <br/> elements since each list item will automatically appear on a new line.

Resources/Online documents

All done?

After you have saved the changes to index.html, return to your browser and refresh to see the changes. Do the items in each of the two div elements now appear with bullets in front of them? Show your instructor your results before starting Lesson 2.