HTML Lists

In this lesson of the HTML tutorial, you will learn...
  1. To create unordered lists.
  2. To create ordered lists.
  3. 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 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

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

HTML Lists Conclusion

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

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.

Use of this website implies agreement to the following:

Copyright Information

All pages and graphics on this Web site are the property of Webucator, Inc. unless otherwise specified.

None of the content on this website may be redistributed or reproduced in any way, shape, or form without written permission from Webucator, Inc.

No Printing or saving of web pages

This content may not be printed or saved. It is for online use only.

Linking to this website

You may link to any of the pages on this website; however, you may not include the content in a frame or iframe without written permission from Webucator, Inc.

Warranties

This website is provided without warranty of any kind. There are no guarantees that use of the site will not be subject to interruptions. All direct or indirect risk related to use of the site is borne entirely by the user. All code and explanations provided on this site are provided without warranties to correctness, performance, fitness, merchantability, and/or any other warranty (whether expressed or implied).

For individual private use only

You agree not to use this online manual to deliver or receive training. If you are delivering or attending a class that is making use of this online manual, you are in violation of our terms of service. Please report any abuse to courseware@webucator.com. If you would like to deliver or receive training using this manual, please fill out the form at http://www.webucator.com/Contact.cfm.