HTML Lists

This lesson is part of the Web Programming 1 Course.

In previous lessons we discussed some specific elements for structuring the content of a web page. We learned how to use p elements to add a paragraph of content. We also used various 'h' elements to display headings in different sizes, such as h1, h2, and h3.

In this lesson, we'll discuss how to create a few different types of lists in an HTML document.

Ordered Lists

Ordered lists automatically display a number next to each item in the list, like so:

  1. Apples
  2. Oranges
  3. Bananas

To create an ordered list, use an ol element (ol stands for 'ordered list'). In order to add an item to the list, you must nest an li element within the ol element. The text inside each li element will be displayed next the the number.

The following code sample shows the HTML code for creating a simple ordered list:

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

Notice how the code is formatted, each li element is indented within the opening and closing ol tags. This helps us to see that the li elements are clearly nested/contained within the ol element. I keep mentioning the importance of formatting your code because it is extremely important to help you understand how the content on the page is structured. And as you begin to explore other programming languages (such as CSS and JavaScript) you'll find that it's extremely important to indent your code properly.

Alt + Shift + Down Arrow

In VSCode, you can copy the line that your cursor is on by press Alt + Shift + Down Arrow. This is a handy shortcut that we'll use at times during the course.

Unordered Lists

An unordered list is very similar to a an ordered list. The difference is that instead of numbers appearing before each list item, a bullet point is displayed. To add an unordered list to a page, use a ul element, then nest li elements inside it, like so:

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

The HTML code sample above would look like this when viewed in a web browser (notice the bullet points, instead of numbers):

Nested Lists

We have mentioned hierarchical data structures a few times in this course. We can use nested lists help people visualize/understand hierarchical data. For example, a book may be broken up into chapters, and each chapter may be broken up into sections. Imagine what the table of contents might look like for a book about web development:

  1. Chapter 1 - HTML
  2. Intro to HTML
  3. All About HTML Elements
  4. Chapter 2 - CSS
  5. Intro to CSS
  6. All About CSS Selectors
  7. Chapter 3 - JavaScript
  8. Intro to JavaScript
  9. All About Events in JavaScript

Lets start writing the HTML code for this table of contents by creating a list of the chapters, like so:

<ol>
    <li>Chapter 1 - HTML</li>
    <li>Chapter 2 - CSS</li>
    <li>Chapter 3 - JavaScript</li>
</ol>

Now we'll add the sections that are in the first chapter. Pay close attention to the structure in the code sample below and note that the unordered list which displays the sections is nested within the li element for chapter 1.

<ol>
    <li>
        Chapter 1 - HTML
        <ul>
            <li>Intro to HTML</li>
            <li>All About HTML Elements</li>
        </ul>
    </li>
    <li>Chapter 2 - CSS</li>
    <li>Chapter 3 - JavaScript</li>
</ol>

It's very important to be aware that the ul element is contained within the the li element for chapter 1. Many of my students have made a mistake by putting the ul element AFTER the li for chapter 1. It's easy to make this mistake because you won't notice a problem when you view the page in the browser. But later, when adding CSS code to a page, you may notice the bug.