Home : Articles : Making lists

Tutorial: Making lists

Level: Beginner. Published on 6 February 2003 in HTML

Learn how to display things in a list in your Web page. We look at unordered lists, ordered lists, and definition lists.

Types of lists

There are 3 basic types of lists that you can produce using HTML. They are:

Unordered lists

(also known as "bulleted lists"). For example:

Apples are green
Bananas are yellow
Oranges are orange

Ordered lists

(also known as "numbered lists"). For example:

Light the blue touch paper.
Stand well back.
Enjoy the fireworks!

Definition lists

Good for making lists where each item needs a summary followed by a more detailed description. For example:

Paris, France: The capital city of France. Famous attractions include the Eiffel Tower and the Notre Dame Cathedral.
Sydney, Australia: The state capital of New South Wales, Australia. Famous attractions include the Sydney Opera House and Harbour Bridge.
London, England: The capital city of England. Famous attractions include Tower Bridge and Big Ben.

Let's have a look at how to create each of these types of lists in HTML!

Creating unordered lists

To create an unordered list, we use the <ul></ul> tags for the list, and the <li></li> tags for the list items.

So, to create the unordered list example above, we'd use:


<ul>
  <li>Apples are green</li>
  <li>Bananas are yellow</li>
  <li>Oranges are orange</li>
</ul>

Creating ordered lists

The method to create ordered (numbered) lists is almost exactly the same as for unordered lists. The only difference is that we use <ol></ol> tags in place of the <ul></ul> tags.

To recreate our ordered list above:


<ol>
  <li>Light the blue touch paper.</li>
  <li>Stand well back.</li>
  <li>Enjoy the fireworks!</li>
</ol>

Creating definition lists

Creating a definition list is a little more complicated than the last 2 types, but it's still pretty easy!

The list itself is created with the <dl></dl> tags. Each item in the list consists of a term, created using the <dt></dt> tags, and the indented definition, which uses the <dd></dd> tags.

So, our cities example above is created as follows:


<dl>
  <dt><strong>Paris, France</strong></dt>
  <dd>The capital city of France. Famous attractions
  include the Eiffel Tower and the Notre Dame Cathedral.</dd>
  <dt><strong>Sydney, Australia</strong></dt>
  <dd>The state capital of New South Wales, Australia. Famous
  attractions include the Sydney Opera House and
  Harbour Bridge.</dd>
  <dt><strong>London, England</strong></dt>
  <dd>The capital city of England. Famous attractions 
  include Tower Bridge and Big Ben.</dd>
</dl>

Mixing and matching

It's possible to nest lists. For example, here is a 2-level ordered list:

Chapter 1
1. Section 1.1
2. Section 1.2
Chapter 2
1. Section 2.1
2. Section 2.2
3. Section 2.3

...and here's the code for it:


<ol>
  <li>Chapter 1
    <ol>
      <li>Section 1.1</li>
      <li>Section 1.2</li>
    </ol>
  </li>
  <li>Chapter 2
    <ol>
      <li>Section 2.1</li>
      <li>Section 2.2</li>
      <li>Section 2.3</li>
    </ol>
  </li>
</ol>

It's even possible to nest different types of lists together! In this example, our unordered and ordered lists above are nested inside a definition list:

Types of Fruit

Apples are green
Bananas are yellow
Oranges are orange

Firework Instructions

Light the blue touch paper.
Stand well back.
Enjoy the fireworks!

...and here's the code:


<dl>
  <dt><strong>Types of Fruit</strong></dt>
  <dd>
    <ul>
      <li>Apples are green</li>
      <li>Bananas are yellow</li>
      <li>Oranges are orange</li>
    </ul>
  </dd>

  <dt><strong>Firework Instructions</strong></dt>
  <dd>
    <ol>
      <li>Light the blue touch paper.</li>
      <li>Stand well back.</li>
      <li>Enjoy the fireworks!</li>
    </ol>
  </dd>
</dl>

That's about all there is to know about HTML lists. Why not have a go at creating a few lists yourself! They're easy to make.

Share and enjoy

If you liked this article, you can share it with others by adding it to any of the following social bookmarking sites:

That's the end of this article. We hope you found it useful. If you're still stuck and would like further help, check out our online Help Forums, where you can get assistance from members of Elated and other webmasters.

Also, don't forget the free ELATED Extra Newsletter, where you can get more great Web-building articles and tips sent straight to your inbox!

If you would like to offer us feedback on this or any of our articles, please contact us. Have fun!

Top of Page

ELATED :) Love Your Site

Simon & Matt's new Photoshop book is out now!

Featured PageKits