Ordered and Unordered ListsS2C Home « Ordered and Unordered Lists

Everything you wanted to know about lists and were afraid to ask. Lists are great for all sorts of things including navigation bars, collections of links and anything that needs to appear, well in a list. We give you the lowdown on ordered and unordered lists in the HTML Basics tutorial.

The <ol> Tag

The <ol> tag and its closing </ol> tag are used for creating an ordered list. An ordered list is a collection of related items where the sequencing or order DOES matter.

The <ul> Tag

The <ul> and its closing </ul> tag are used for creating an unordered list. An unordered list is a collection of related items where the sequencing or order DOES NOT matter.

The <li> Tag

The <li> tag and its closing </li> tag defines a list item for use in ordered <ol> and unordered <ul> lists.

Open the file with Notepad we created and tested in Lesson: 5 Emphasising Text

You saved the file to your computer in the C:\_HTMLBasics folder as lesson_5_webpage.html

Copy and paste the following code into the reopened file, overwriting the existing contents:


<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
  HTML Tutorials - Basic HTML Lesson 6 - Ordered and Unordered Lists
</title>
</head>
<body>
<h1>Ordered and Unordered Lists</h1>
<h2>What's The Difference?</h2>
<p><strong>Unordered Lists</strong> - Ordering <em>doesn't</em> matter.</p>
<ul>
  <li>Tin of Tomatoes</li>
  <li>Bacon</li>
  <li>Loaf of Bread</li>
  <li>Mushrooms</li>
</ul>
<p><strong>Ordered Lists</strong> - Ordering <em>does</em> matter.</p>
<ol>
  <li>Put The Kettle On</li>
  <li>Put The Teabag in The Cup</li>
  <li>Wait for Kettle To Boil</li>
  <li>Pour Boiling Water In The Cup</li>
</ol>
</body>
</html>

When your file matches the HTML code above, save in the C:\_HTMLBasics folder as lesson_6_webpage.html and close the Notepad.

save list

Viewing Our Changed File

From the C:\_HTMLBasics folder, double click on the saved file and it will appear in your default web browser and look something like the following image.

lists1

From the results you can see that the <ul> tag gives us a bulleted list and the <ol> tag gives us a numbered list.

Lists Within Lists

Having lists within lists is perfectly acceptable in HTML, just be careful to properly close the tags. Lets take a look at how to do this.

From the C:\_HTMLBasics folder, reopen lesson_6_webpage.html

Copy and paste the following code into the reopened file, overwriting the existing contents:


<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
  HTML Tutorials - Basic HTML Lesson 6 - Ordered and Unordered Lists
</title>
</head>
<body>
<h1>Ordered and Unordered Lists</h1>
<h2>Lists Within Lists</h2>
<p><strong>Unordered Lists</strong> - Ordering <em>doesn't</em> matter.</p>
<ul>
  <li>Shopping List
    <ul>
      <li>Tin of Tomatoes</li>
      <li>Bacon</li>
      <li>Loaf of Bread</li>
      <li>Mushrooms</li>
    </ul>
  </li>	
  <li>Party Guest List
    <ul>
      <li>Bruce Wayne</li>
      <li>Peter Parker</li>
      <li>Emily Bronte</li>
      <li>Alma Walcott</li>
    </ul>
  </li>
</ul>
<p><strong>Ordered Lists</strong> - Ordering <em>does</em> matter.</p>
<ol>
  <li>Things To Do When I Get Up
    <ol>
      <li>Put The Kettle On</li>
      <li>Put The Teabag in The Cup</li>
      <li>Wait for Kettle To Boil</li>
      <li>Pour Boiling Water In The Cup</li>
    </ol>
  </li>	
  <li>Things To Do When I Go To Bed
    <ol>
      <li>Turn Stuff Off</li>
      <li>Put The Cat Out</li>
      <li>Lock The Doors</li>
      <li>Brush My Teeth</li>
    </ol>
  </li>
</ol>
</body>
</html>

When your file matches the HTML code above, save in the C:\_HTMLBasics folder as lesson_6_webpage.html and close the Notepad.

Viewing Our Changed File

From the C:\_HTMLBasics folder, double click on the saved file and it will appear in your default web browser and look something like the following image.

lists2

Experiment with the HTML, maybe add another list within a list and so on. See what results you get.

Lesson 6 Complete

In this lesson we learned about the powerful <ol> and <ul> tags that are used to produce unordered and ordered lists.

Related Tutorials

HTML4 Intermediate Tutorials - Lesson 4 - Defintion Lists

CSS Advanced Tutorials - Lesson 3 - Styling Lists

What's Next?

In the next lesson we use images to enhance our pages.

HTML4 Reference

The <ol> ordered list tag

The <ul> unordered list tag

The <li> list item tag

go to home page Homepage go to top of page Top