HTML Lists

In this lesson of the HTML tutorial, you will learn...

To create unordered lists.
To create ordered lists.
To create definition lists.

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

Unordered Lists

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

Code Sample: Lists/Demos/BeatlesUnordered.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Beatles - unordered</title>
</head>
<body>
 <h1>Beatles</h1>
 <ul>
  <li>Paul McCartney</li>
  <li>John Lennon</li>
  <li>Ringo Starr</li>
  <li>George Harrison</li>
 </ul>
</body>
</html>

The <ul> tag starts an unordered list. Each list item is contained in <li></li> tags. The image below shows how this code would be rendered.

Nesting Unordered Lists

Unordered lists can also be nested. The browsers use indentation and different styles (see footnote) of bullets to display the nested lists. The following example shows how this works.

Code Sample: Lists/Demos/BeatlesUnorderedNested.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Beatles - unordered and nested</title>
</head>
<body>
 <h1>Beatles Lead Singers</h1>
 <ul>
  <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>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>Ringo Starr
   <ul>
    <li>Don't Pass Me By</li>
    <li>Yellow Submarine</li>
   </ul>
  </li>
  <li>George Harrison
   <ul>
    <li>Here Comes The Sun</li>
    <li>Roll Over Beethoven</li>
   </ul>
  </li>
 </ul>
</body>
</html>

Notice that the nested unordered lists are siblings to plain text. For example, the text "George Harrison" is a sibling of the unordered list that follows it. Only list items, not lists themselves, can contain nested (child) lists. The resulting page is shown below:

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/BeatlesOrdered.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Beatles - ordered</title>
</head>
<body>
 <h1>Beatles</h1>
 <ol>
  <li>Paul McCartney</li>
  <li>John Lennon</li>
  <li>Ringo Starr</li>
  <li>George Harrison</li>
 </ol>
</body>
</html>

The image below shows how the code will be rendered.

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/BeatlesOrderedNested.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Beatles - unordered and nested</title>
</head>
<body>
 <h1>Beatles Lead Singers</h1>
 <ol>
  <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>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>Ringo Starr
   <ol>
    <li>Don't Pass Me By</li>
    <li>Yellow Submarine</li>
   </ol>
  </li>
  <li>George Harrison
   <ol>
    <li>Here Comes The Sun</li>
    <li>Roll Over Beethoven</li>
   </ol>
  </li>
 </ol>
</body>
</html>

Code Explanation

The resulting page is shown below:

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

Start Attribute (see footnote)

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

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

Definition Lists

Definition Lists are not as widely used as unordered and ordered lists. The example below is taken from the W3C Recommendation (see footnote). We've modified it to make it XHTML compliant.

Code Sample: Lists/Demos/DefinitionList.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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 and the <dd> elements are the definition descriptions. The screenshot below shows how the code will be rendered.

Exercise: 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 as an unordered list. The page should appear like this:

In addition, you will modify a new page called RunningTerms.html. The page uses a definition list and should appear like this:

Open Lists/Exercises/index.html for editing.
Change the list to a bulleted list as shown in the first screenshot above.
Save your work and open your page in a browser to test it.
Open Lists/Exercises/RunningTerms.html for editing.
Modify the page so that it appears as shown in the screenshot above.
Save your work and open your new page in a browser to test it.

Where is the solution?

HTML Lists Conclusion

In this lesson of the HTML tutorial you have learned to create unordered, ordered and definition lists.

Footnotes

Both the indentation and the style of bullet can be controlled with CSS.
The start attribute is deprecated, but unfortunately there is poor browser support for the CSS property (counter-reset) that is supposed to accomplish the same task.
http://www.w3.org/TR/html4/struct/lists.html#edef-DD

To continue to learn HTML go to the top of this page and click on the next lesson in this HTML Tutorial's Table of Contents.

Last updated on 2009-10-16

HTML Tutorial