HTML Lists

HTML can be used to create structure lists

HTML Lists Elements

Now it is time to learn some new HTML elements <ul>, <ol> and <li> which are used to create lists. What better way to display and describe them than in their very own list!

• <ul> is short for "unordered list" and inserts bullets for each list item. 
• <ol> is short for "ordered list" and numbers each list item. 
• To make items in the list you must use the <li> tag ("list item"). 

As well as their obvious use, lists are also commonly used for structuring data to create website menus and drop down menus. First things first though, let's look at some basic list examples.

Ordered HTML Lists

<ol> <li>A list item</li> <li>Another list item</li> </ol>

The html code above will create a list like this in the browser...

1. First list item 
2. Second list item 

Unordered HTML Lists

<ul> <li>A list item</li> <li>Another list item</li> </ul>

The html code above will create a list like this in the browser...

• A list item 
• Another list item 

HTML List Types

By default the unordered list displays the bullet points as circles and the ordered list uses numbers as its default. You can also create different types of lists, such as a,b,c lists or Roman numeral lists, using the attribute 'type' and setting a relevant value, see the options below.

<ol type="1|a|i">

• 1  -  (Default) List using decimal numbers (1, 2, 3, 4) 
• a  -  Alphabetically ordered list, lowercase (a, b, c, d) 
• i  -   Roman numerals list, lowercase (i, ii, iii, iv)

<ul type="disc|circle|square">

• Disc  -  (Default) Filled in circle bullet point list
• Circle  -  An unfilled circle or circle outline bullet point list
• Square  -  A filled in square bullet point list

Practice and experiment by creating your own lists using html and add them into your web pages.

Next Up

Learn how to create and display data in tables using HTML.