Beginning HTML - Home
Introduction - What is HTML, What it can do, what you'll need, etc. The Basics - First steps in HTML. Moving On - Further concepts. Advanced - More advanced ways to use HTML. Glossary - Explanation of terms used in this site HTML Tag and attribute reference - look up the most popular tags and their common attributes for reference
Square Moving On
square Backgrounds
Square Images
Square Links
Square Lists
Square Tables (Part One)
Square Tables (Part Two)
Square Tables (Part Three)
 
How to make a basic list
How to make a numbered, or ordered list
How to change the appearance of a list

Lists can be made easily in HTML. They are useful for effectively presenting information, perhaps to break it into sections to improve readability, or to create bullet points. We will look at three tags - <ul> <ol> and <li>.

How to make a basic list

In HTML there are two kinds of lists - ordered, and unordered. Ordered means that each item on the lists is set in an order, usually numerical, like this -
  1. Item One
  2. Item Two
  3. Item Three
Whereas an unordered list appears like this -
  • Item One
  • Item Two
  • Item Three
To make an unordered list, we use two tags - <ul>, which defines the beginning (with its opening tag) and end (with its closing tag) of the list. To create the items of the list, we use the <li> tag. You don't have to use a closing tag for this if you don't want to.
Let's say we want to make a list of colors we'd like to make into an HTML list - blue, red, green and purple. We start by inserting the beginning and ending for the list -
<ul>
</ul>

...now we can add the list items using the <li> tag -
<ul>
<li>blue</li>
<li>red</li>
<li>green</li>
<li>purple</li>
</ul>

Which displays like this -
  • blue
  • red
  • green
  • purple
How to make an ordered, or numbered list

The other type of list you can create with HTML is an ordered one. We still use the <li> tag to create the list items, but to create the list itself we use the <ol> tag.
So an ordered version of the list we saw above would be this -
= <ol>
<li>blue</li>
<li>red</li>
<li>green</li>
<li>purple</li>
</ol>

= Which would display like this -
  1. blue
  2. red
  3. green
  4. purple
How to change the appearance of a list

HTML allows us to change the way both types of lists are displayed. We do this using the type attribute, within the <ol> or <ul> tags.
If the list is an unordered one, you can opt to have each list item punctuated with either a disc (the standard filled circle), a circle, or a square. Below are examples of how each appear -
<ul type="disc">
<li>List item goes here</li>
</ul>

would look like this -
  • List item goes here
And
<ul type="circle">
<li>List item goes here</li>
</ul>

would look like this -
  • List item goes here
While
<ul type="square">
<li>List item goes here</li>
</ul>

would look like this -
  • List item goes here
Ordered lists can be changed too. You can choose between each item being punctuated by lowercase letters (a,b,c, etc.), uppercase letters (A,B,C, etc.), lowercase Roman numerals (i,ii,iii, etc.), uppercase Roman numerals (I,II,III, etc.), or as the default setting, (1,2,3, etc.).
To use lowercase letters, use -
<ol type="a">
To use uppercase letters, use -
<ol type="A">
To use lowercase Roman numerals, use -
<ol type="i">
To use uppercase Roman numerals, use -
<ol type="I">;
To use numbers, you can either not include the type attribute, as it's the default setting, or use -
<ol type="1">
Remember to finish the list using - </ol>.

Open up Notepad and practice using lists - try making ordered lists, unordered lists, and different types of lists. If you're feeling adventurous, try nesting a list within another, and see what happens!
Now we'll move on to an important part of HTML - tables.

TopTop of page - BackBack to Links - Next - Tables (Part One)Next

Introduction - The Basics - Moving On - Advanced - Glossary - Reference