Build Your First Web Pages With HTML and CSS

Lists allow you to better structure your text and order information on your web page in a way that is helpful to the reader as well as to browsers and search engines. In this chapter, we'll see two types of lists:

• unordered lists (you may be familiar with them as bulleted lists)

• ordered lists (you may be familiar with them as numbered lists)

HTML allows you to create both, of course, and the list you choose will depend on your needs. List get started! 😉

Unordered lists

Unordered lists are perfect for when you need to show several different items, and the numerical order of them doesn't matter. You may already think of them as "bulleted lists" or other list forms where a tiny shape appears in front of each item (a dash, an empty circle, a star, etc).

For example, a general list of fruits could be shown in text form as:

• Bananas

• Blueberries

• Strawberries

• Apples

• Raspberries

• Kiwis

• Pineapples

To create lists like this, the HTML tag <ul> is appropriate. <ul> stands for unordered list.

The <ul> tag is only used to define the type of list you'll be working with.  It is not used to individually define the items in the list. In order to do so, you need another HTML tag: <li>, which stands for list item.

Therefore, you'll first create your opening and closing <ul> and </ul> tags to indicate you want to create an unordered list. Then, add your list items using <li> tags inside as follows:

<h1>Fruits</h1>
<ul>
    <li>Bananas</li>
    <li>Blueberries</li>
    <li>Strawberries</li>
    <li>Apples</li>
    <li>Raspberries</li>
    <li>Kiwis</li>
    <li>Pineapples</li>
</ul>

The <li> tags are indented to the right, relative to the <ul> tags, because it's important for code readability. Developers indent elements when they're inside other elements (they're called "nested elements" in developer vocab). Because the <li> tags are inside a set of <ul> tags, they are indented one level. You'll notice code indentation throughout this course.

Ordered list

Imagine you'd rather create a list of your favorite fruits. The order of that list would matter (the closer a fruit is to the top of the list, the more you like it)! Alternatively, maybe you want to create a step-by-step list of how to do something or the top 10 reasons to visit a city. In either example, the order of the list items matters.

Numbers are useful in these cases. Good news: all you need to do to end up with a numbered list instead of a bulleted list is to use a slightly different tag.

Create numbered lists using the tag <ol>. <ol> stands for ordered list. As usual, wrap your list items in an <ol> opening tag and </ol> closing tag.

<h1>My favorite fruits</h1>
<ol>
    <li>Blueberries</li>
    <li>Strawberries</li>
    <li>Blackberries</li>
    <li>Apples</li>
    <li>Honeydew</li>
    <li>Mangoes</li>
    <li>Bananas</li>
</ol>

Choosing which type of list to use

With that in mind, let's do some quick examples.

Example 1: You're building a new page for your company that lists the steps necessary to create an account. Which kind of list would make sense, unordered or ordered?

Here's the HTML for both:

<p>An unordered list (ul):</p>
<ul>
    <li>Click the "Sign up" button.</li>
    <li>Enter your name.</li>
    <li>Enter your email address.</li>
    <li>Click the "Submit" button.</li>
    <li>You'll see the landing page for your new account!</li>
</ul>

<p>Or an ordered list (ol):</p>
<ol>
    <li>Click the "Sign up" button.</li>
    <li>Enter your name.</li>
    <li>Enter your email address.</li>
    <li>Click the "Submit" button.</li>
    <li>You'll see the landing page for your new account!</li>
</ol>

The above HTML produces the following:

Solution: an ordered list makes more sense! Since the order of the steps matters, your HTML should reflect this. Surround your <li> (list items) with <ol> opening and closing tags.

Example 2: You're writing a blog post to share what you imagine eating on your trip to Mexico soon. Which kind of list would make sense, unordered or ordered?

Here's the HTML for both:

<p>An unordered list (ul):</p>
<ul>
    <li>Tacos</li>
    <li>Ceviche</li>
    <li>Tamales</li>
    <li>Mole poblano</li>
    <li>Sopes</li>
</ul>

<p>Or an ordered list (ol):</p>
<ol>
    <li>Tacos</li>
    <li>Ceviche</li>
    <li>Tamales</li>
    <li>Mole poblano</li>
    <li>Sopes</li>
</ol>

The above HTML produces the following:

Solution: an unordered list makes more sense! Since the order of the food doesn't matter at all (you're not going to obligatorily eat tacos BEFORE ceviche or mole poblano BEFORE sopes), your HTML should reflect this. Surround your <li> (list items) with <ul> opening and closing tags.

Practice!

Put lists into practice yourself! Head to this CodePen exercise and follow the instructions bellow.

1. Choose the right list type for each of the lists already in the code editor. Add tags around each list, either <ul></ul> or <ol></ol>. There is one list of each type.

2. Place list item tags around each item, i.e., <li>Lincoln in the Bardo</li>.