HTML Lists

This tutorial is part of a web programming course for people who have no programming experience.




In the previous lesson we discussed some specific elements for structuring the content of a web page. We learned how to use p tags to add a paragraph of content. We 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. But before we get started, I would like to say a little bit more about the content of a web page:

Orderd 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.

Get used to seeing li elements! Because you'll find that lists are used in even the simplest of web pages. You'll find lists everywere if you start 'inspecting' the HTML elements on a page that you visit, and you can do this by using the web developer tools as demonstrated in the video. li stands for list item, which is a term you'll hear in many corners of the programming world. Lists (and the list items within) are used to help website visitors understand how the content is organized within a website. So as a web developer, you'll commonly use lists to display content and data.

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):

  • Apples
  • Oranges
  • Bananas

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
    • Intro to HTML
    • All About HTML Elements
  2. Chapter 2 - CSS
    • Intro to CSS
    • All About CSS Selectors
  3. Chapter 3 - JavaScript
    • Intro to JavaScript
    • 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>

After having the honest discussion about relationships (in the previous lesson), can you see how the following code sample, which is not correct, differs from the previous one? 

NOTE THAT THIS IS NOT THE PROPER HTML FOR A NESTED LIST!
<ol>
    <li>
        Chapter 1 - HTML
    </li>
    <ul>
        <li>Intro to HTML</li>
        <li>All About HTML Elements</li>
    </ul>
    <li>Chapter 2 - CSS</li>
    <li>Chapter 3 - JavaScript</li>
</ol>

These two code samples demonstrate the importance of indenting your code properly. Indenting your code properly helps you to understand the structure of the page, and the relationships between the elements that make up the HTML document. In the first code sample of the nested list, which was the correct way, the ul element is a child of the li element (for chapter 1). In the second sample, which shows the wrong way to create a nested list, the ul element is a sibling of the li element for the first chapter.

NEXT LESSON: HTML Hyperlinks