facebook twitter
Webucator's Free HTML Training Tutorial

Lesson: HTML Lists

Welcome to our free HTML Training tutorial. This tutorial is based on Webucator's Introduction to HTML Training course.

There are three types of lists in HTML: unordered, ordered and definition lists. In this lesson, you will learn how to create all three.

Lesson Goals

  • Learn to create unordered lists.
  • Learn to create ordered lists.
  • Learn to create definition lists.

Unordered Lists

Unordered lists are rendered as bulleted lists. Take a look at the following code sample:

Lists/Demos/beatles-unordered.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Beatles - unordered</title>
</head>
<body>
  <h1>Beatles</h1>
  <ul>
    <li>John Lennon</li>
    <li>Paul McCartney</li>
    <li>George Harrison</li>
    <li>Ringo Starr</li>
  </ul>
</body>
</html>

Code Explanation

The <ul> tag starts an unordered list. Each list item is contained in <li></li> tags. The screenshot below shows how this code would be rendered:Unordered Lists of Beatles Songs by Singer

Nesting Unordered Lists

Unordered lists can also be nested. The browsers use indentation and different styles of bullets to display the nested lists. (Both the indentation and the style of bullet can be controlled with CSS.) The following example shows how this works:

Lists/Demos/beatles-unordered-nested.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Beatles - unordered and nested</title>
</head>
<body>
  <h1>Beatles Lead Singers</h1>
  <ul>
    <li>John Lennon
      <ul>
        <li>Norwegian Wood (This Bird Has Flown)</li>
        <li>All You Need Is Love</li>
        <li>Day Tripper</li>
        <li>Can't Buy Me Love
          <ul>
            <li>John and Paul together</li>
          </ul>
        </li>
        <li>Lucy In The Sky With Diamonds</li>
      </ul>
    </li>
    <li>Paul McCartney
      <ul>
        <li>Lady Madonna</li>
        <li>Lovely Rita</li>
        <li>Eleanor Rigby</li>
        <li>Can't Buy Me Love
          <ul>
            <li>John and Paul together</li>
          </ul>
        </li>
        <li>When I'm Sixty-Four</li>
      </ul>
    </li>
    <li>George Harrison
      <ul>
        <li>Here Comes The Sun</li>
        <li>Roll Over Beethoven</li>
      </ul>
    </li>
    <li>Ringo Starr
      <ul>
        <li>Don't Pass Me By</li>
        <li>Yellow Submarine</li>
      </ul>
    </li>
  </ul>
</body>
</html>

Notice that the nested unordered lists are siblings to plain text. For example, the text "George Harrison" and the unordered list that follows that text both are contained within the same parent <li> tag. Only list items, not lists themselves, can contain nested (child) lists. The resulting page is shown below:Unordered Nested Lists Beatles Songs by Singer

Ordered Lists

Ordered lists are very similar to unordered lists. They are created with the <ol> tag and, by default, will display list items with numbers. Take a look at the following code:

Code Sample:

Lists/Demos/beatles-ordered.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Beatles - ordered</title>
</head>
<body>
  <h1>Beatles</h1>
  <ol>
    <li>John Lennon</li>
    <li>Paul McCartney</li>
    <li>George Harrison</li>
    <li>Ringo Starr</li>
  </ol>
</body>
</html>

Code Explanation

The screenshot below shows how the code will be rendered:Beatles Ordered List

Nesting Ordered Lists

Like unordered lists, ordered lists can be nested. However, unlike in some word processing applications, nested ordered lists will continue to be displayed using standard numbers.

Code Sample:

Lists/Demos/beatles-ordered-nested.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Beatles - ordered and nested</title>
</head>
<body>
  <h1>Beatles Lead Singers</h1>
  <ol>
    <li>John Lennon
      <ol>
        <li>Norwegian Wood (This Bird Has Flown)</li>
        <li>All You Need Is Love</li>
        <li>Day Tripper</li>
        <li>Can't Buy Me Love
          <ul>
            <li>John and Paul together</li>
          </ul>
        </li>
        <li>Lucy In The Sky With Diamonds</li>
      </ol>
    </li>
    <li>Paul McCartney
      <ol>
        <li>Lady Madonna</li>
        <li>Lovely Rita</li>
        <li>Eleanor Rigby</li>
        <li>Can't Buy Me Love
          <ul>
            <li>John and Paul together</li>
          </ul>
        </li>
        <li>When I'm Sixty-Four</li>
      </ol>
    </li>
    <li>George Harrison
      <ol>
        <li>Here Comes The Sun</li>
        <li>Roll Over Beethoven</li>
      </ol>
    </li>
    <li>Ringo Starr
      <ol>
        <li>Don't Pass Me By</li>
        <li>Yellow Submarine</li>
      </ol>
    </li>
  </ol>
</body>
</html>

Code Explanation

The resulting page is shown below:Beatles Ordered Nested Lists

As you can see, ordered lists can have nested unordered lists. The reverse is also true.

The type Attribute

The type attribute is used to change the number type. Possible values are shown in the table below:

Values of the type Attribute
Value Description
i Lowercase Roman Numerals
I Uppercase Roman Numerals
a Lowercase Letters
A Uppercase Letters
1 Numbers (default)

The code below illustrates how type is used:

Code Sample:

Lists/Demos/beatles-ordered-nested-type.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Beatles - ordered and nested with type</title>
</head>
<body>
  <h1>Beatles Lead Singers</h1>
  <ol>
    <li>John Lennon
      <ol type="A">
        <li>Norwegian Wood (This Bird Has Flown)</li>
        <li>All You Need Is Love</li>
        <li>Day Tripper</li>
        <li>Can't Buy Me Love
          <ul>
            <li>John and Paul together</li>
          </ul>
        </li>
        <li>Lucy In The Sky With Diamonds</li>
      </ol>
    </li>
    <li>Paul McCartney
      <ol type="A">
        <li>Lady Madonna</li>
        <li>Lovely Rita</li>
        <li>Eleanor Rigby</li>
        <li>Can't Buy Me Love
          <ul>
            <li>John and Paul together</li>
          </ul>
        </li>
        <li>When I'm Sixty-Four</li>
      </ol>
    </li>
    <li>George Harrison
      <ol type="A">
        <li>Here Comes The Sun</li>
        <li>Roll Over Beethoven</li>
      </ol>
    </li>
    <li>Ringo Starr
      <ol type="A">
        <li>Don't Pass Me By</li>
        <li>Yellow Submarine</li>
      </ol>
    </li>
  </ol>
</body>
</html>

Code Explanation

The resulting page is shown below:Beatles Ordered Nested Lists with type

A Note on the type Attribute

As a rule, it is better to set the type of list using the CSS list-style-type property. The exception is when the value of the list item is meaningful as it sometimes is in legal or technical documents. The reason for this that you cannot be sure that CSS will be enabled.

Also note that unordered lists (<ul> tags) also take a type attribute, but this has been deprecated in favor of CSS, so you should not use it.

The start Attribute

The start attribute is used to specify what number the list should start on. It takes as a value any integer. For example:

<ol start="3">
	<li>John Lennon</li>
	<li>Paul McCartney</li>
	<li>George Harrison</li>
	<li>Ringo Starr</li>
</ol>

The screenshot below shows how the code will be rendered:Beatles Ordered List with Start

Definition Lists

Definition Lists are not as widely used as unordered and ordered lists. The example below is a modified version of an example from the W3C Recommendation.

Lists/Demos/definition-list.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Definition List</title>
</head>
<body>
  <h1>Definition List</h1>
  <dl>
    <dt>Dweeb</dt>
    <dd>young excitable person who may mature into a 
      <em>Nerd</em> or <em>Geek</em></dd>
    <dt>Hacker</dt>
    <dd>a clever programmer</dd>
    <dt>Nerd</dt>
    <dd>technically bright but socially inept person</dd>
  </dl>
</body>
</html>

Code Explanation

  • The <dl> element contains the definition list.
  • The <dt> elements are the definition terms.
  • The <dd> elements are the definition descriptions.

The screenshot below shows how the code will be rendered:Definition List

Creating Lists

Duration: 15 to 25 minutes.

In this exercise you will modify index.html so that the two list items under the text "Runners Home is dedicated to providing you with:" will appear as a numbered list. You will also change the menu so that the items appear in an unordered list. The page should appear like this:Solution to Exercise

In addition, you will modify a new page called running-terms.html. The page uses a definition list and should appear like this:Solution to Exercise

  1. Open Lists/Exercises/index.html for editing.
  2. Change the list to a bulleted list as shown in the first screenshot above.
  3. Save your work and open your page in a browser to test it.
  4. Open Lists/Exercises/running-terms.html for editing.
  5. Modify the page so that it appears as shown in the screenshot above.
  6. Save your work and open your new page in a browser to test it.

Solution:

Lists/Solutions/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Runners Home&trade;</title>
</head>
<body>
<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="races.html">Races</a></li>
  <li><a href="resources.html">Resources</a></li>
  <li><a href="calculator.html">Calculator</a></li>
  <li><a href="running-log.html">Running Log</a></li>
  <li><a href="my-account.html">My Account</a></li>
  <li><a href="logout.html">Log out</a></li>
</ul>
<p>Hello, Stranger!</p>
<h1>Welcome to Runners Home&trade;</h1>
<p><img src="images/runners-home.png" alt="Runners Home Logo"></p>
<p>Runners Home&trade; is dedicated to providing you with:</p>
<ol>
  <li><a href="races.html">the most up-to-date information on running races</a>.</li>
  <li><a href="resources.html">the best resources for runners</a>.</li>
</ol>
<hr>
<p>&copy; 2020 Runners Home. All rights reserved.
For questions, send email to
<a href="mailto:info@runners-home.com">info@runners-home.com</a>.</p>
</body>
</html>

Solution:

Lists/Solutions/running-terms.html
---- C O D E   O M I T T E D ----

<dl>
  <dt>Aerobic Conditioning</dt>
  <dd>Training that improves endurance. Used to refer to running or other exercise at an intensity that's sufficiently easy for your respiratory and cardiovascular systems to deliver all or most of the oxygen required by your muscles, and slow enough that lactic acid doesn't appreciably build up in your muscles. Generally, you can sustain a slow aerobic pace for long periods of time, provided you have the endurance to go long distances.</dd>

  <dt>Bandit</dt>
  <dd>A bandit is one who runs an official road race without officially registering for the event or paying registration fees. Bandits are popular in large races that sell out fast, and are generally frowned upon by the running community. While banditing may appear innocent at first, a bandit may actually end up taking resources from registered runners, from water to race medals to even the attention of emergency medical staff.</dd>

  <dt><abbr title="couch to 5K">C25K</abbr></dt>
  <dd>Acronym for couch to 5K, a beginner training plan to take non-runners from "the couch" to running their first 5K.</dd>

  <dt><abbr title="Did not finish">DNF</abbr></dt>
  <dd>"Did not finish." This can be due to pulling yourself out of a race, or simply not finishing in a designated course time.</dd>

  <dt>Easy Run</dt>
  <dd>A slow run done at a conversational pace.</dd>
</dl>

---- C O D E   O M I T T E D ----