• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Web Development / HTML / HTML Lists

HTML Lists

6 February 2003 / Leave a Comment

In this tutorial I’ll show you how to create HTML lists in your Web page. We’ll look at unordered (bullet) lists, ordered (numbered) lists, and definition lists.

Types of HTML lists

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

Unordered lists

Unordered lists are also known as bullet lists or bulleted lists. For example:

  • Apples are green
  • Bananas are yellow
  • Oranges are orange

Ordered lists

These are also known as numbered lists. For example:

  1. Light the blue touch paper.
  2. Stand well back.
  3. 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 explore how to create each of these types of HTML lists.

Creating unordered lists

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

So, to create the unordered list example above, you’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 you use <ol></ol> tags in place of the <ul></ul> tags.

To recreate the 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 definition 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, the 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 HTML lists

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

  1. Chapter 1
      1. Section 1.1
      2. Section 1.2
  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, the 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
    1. Light the blue touch paper.
    2. Stand well back.
    3. 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. You’ve looked at creating bullet lists, numbered lists, and definition lists.

Why not have a go at creating a few HTML lists yourself! They’re easy to make.

Filed Under: HTML Tagged With: bullet lists, dd, dl, dt, html basics, html bullets, html help, html li, html tutorials, html ul, li, numbered lists, ol, ordered lists, ul, unordered lists

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

To include a block of code in your comment, surround it with <pre> ... </pre> tags. You can include smaller code snippets inside some normal text by surrounding them with <code> ... </code> tags.

Allowed tags in comments: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre> .

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits