HTML lists are a fundamental building block of pretty much every web page. You've likely interacted with lists without even knowing that is what you were clicking or hovering. They're most commonly used for:

1. Creating navigation
2. Displaying collections
3. Showing sorted items
4. Creating outlines and hierarchies
5. Much more! (Including this list)

There are two types of lists. There are ordered lists and unordered lists. We'll cover both in this lesson as well as point you to a tutorial that will run through some details about how to use HTML lists.

There are two main parts to an HTML list:

1. The surrounding list tag which will be either <ul></ul> or <ol></ol>
2. The enclosed list item tags <li></li>.

The end result looks like this:

<ul>
  <li>Fish</li>
  <li>Cats</li>
  <li>Dogs</li>
</ul>

The above is an example of an unordered list. It is nothing too complex, although lists can become a lot more complicated and help to create really rich and meaningful markup. Let's have a look at each type. After we get you started you'll read through a detailed walkthrough about creating HTML lists.

Ordered Lists

Ordered lists get their name from having an order. The order by default starts at 1 and will increase as you add items. Here is an example:

<ol>
  <li>Bananas</li>
  <li>Oranges</li>
  <li>Apples</li>
  <li>Pears</li>
</ol>

This will render to:

1. Bananas
2. Oranges
3. Apples
4. Pears

Then as we add items the numbers increase automatically:

1. Bananas
2. Oranges
3. Apples
4. Pears
5. Grapes
6. Lemons

Ordered lists make great candidates for listing items in a rank. Like medals for example:

1. Gold
2. Silver
3. Bronze

Unordered Lists

Unordered lists lack the numeric sorting that ordered lists have. They usually default to a bullet circle next to each item. Here is an example:

<ul>
  <li>Bananas</li>
  <li>Oranges</li>
  <li>Apples</li>
  <li>Pears</li>
</ul>

This will render:

• Bananas
• Oranges
• Apples
• Pears

Because unordered lists have no sorting quality or rank they make great candidates for navigation links:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/basics.html">Basics</a></li>
    <li><a href="/lists.html">Lists</a></li>
    <li><a href="/forms.html">Forms</a></li>
    <li><a href="/tables.html">Tables</a></li>
  </ul>
</nav>

You'll likely find yourself using unordered lists to create stacks and lines of links for sidebars and headers.

Nesting Lists

Nesting lists is a great way to show hierarchies of collections of items. Nesting lists can help you create outlines as well as nest links under categories or subpages in your navigation. Here is an example of how you'd nest some lists:

<ol>
  <li>Bananas</li>
  <li>Oranges</li>
  <li>Apples</li>
  <li>Pears</li>
  <li> Nested List
    <ul>
      <li>Bananas</li>
      <li>Oranges</li>
      <li>Apples</li>
      <li>Pears</li>
      <li> Nested List
        <ol>
          <li>Bananas</li>
          <li>Oranges</li>
          <li>Apples</li>
          <li>Pears</li>
        </ol>
      </li>
    </ul>
  </li>
</ol>

As you can see the nested lists go inside the <li></li> tags regardless of whether they are ordered or unordered. Also, notice that the li tag with the nested list still gets its own text.

Here is an example of a rendered nested list:

1. Bananas
2. Oranges
3. Apples
4. Pears
5. Nested List
   • Bananas
   • Oranges
   • Apples
   • Pears
   • Nested List
     1. Bananas
     2. Oranges
     3. Apples
     4. Pears

Shay Howe: Creating HTML Lists

There's plenty more that you can do with HTML lists, but so far you've seen the basics. The basics with lists gets you far indeed.

Your task is to read through a walkthrough of working with ordered and unordered lists written by Shay Howe. Read through the sections that deal with the HTML side of lists. There are sections that deal with using CSS to style lists. While you are welcome to read these as extra credit, they are not necessary as we'll be diving into CSS and styling separately.

Code Review

The important bits of code from this lesson

< !-- Unordered Lists -->
<ul>
  <li>Fish</li>
  <li>Cats</li>
  <li>Dogs</li>
</ul>

< !-- Ordered Lists -->
<ol>
  <li>Bananas</li>
  <li>Oranges</li>
  <li>Apples</li>
  <li>Pears</li>
</ol>

< !-- Nesting Lists -->
<ol>
  <li>Bananas</li>
  <li>Oranges</li>
  <li>Apples</li>
  <li>Pears</li>
  <li> Nested List
    <ul>
      <li>Bananas</li>
      <li>Oranges</li>
      <li>Apples</li>
      <li>Pears</li>
      <li> Nested List
        <ol>
          <li>Bananas</li>
          <li>Oranges</li>
          <li>Apples</li>
          <li>Pears</li>
        </ol>
      </li>
    </ul>
  </li>
</ol>

Wrapping Up

You should now have a much firmer grasp on how to use HTML lists to create ranked collections of items and group together links for navigation. Lists are one of the core HTML tags that you'll be using everyday, so having a clear understanding of when and how to use them will aid you in creating more complex HTML components later.

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!