1. HTML4 Tutorial
2. The Web
3. HTML and URLs
4. HTML Element Structure
5. HTML Document Structure
6. HTML - Create Your First HTML Document
7. HTML Text Formatting Elements
8. HTML Entities
9. HTML Lists
10. HTML Links
11. HTML and Images
12. HTML Tables
13. HTML Forms
14. HTML div and span Elements
15. HTML iframe
16. HTML Meta Tags
17. CSS Introduction
18. JavaScript Introduction
19. XHTML Introduction

• ul - Unordered Lists
  • Bullet Types
• ol - Ordered Lists
  • Number Types

HTML contains two different list elements which can be used to create bullet lists and numbered lists.

The two HTML list elements are <ul> (unordered list) and <ol> (ordered list). Both list elements will be explained in more detail in the following sections.

ul - Unordered Lists

Unordered lists are bullet lists. Such lists are created using the <ul> element. Here is an example:

<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item etc.</li>
</ul>    

The <li> elements nested inside the <ul> element are used to enclose each list item in the list.

Here is how the list looks in a browser:

• List Item 1
• List Item 2
• List Item etc.

Bullet Types

You can choose different bullet types for the unordered list using the type attribute. You can use the following types:

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

Here is how these bullets look in the browser:

• Square

• Circle

• Disc

ol - Ordered Lists

Ordered lists are used to create numbered lists. Instead of bullets, each list item is assigned a number in a sequence. Here is an example:

<ol>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ol>    

As you can see, the <li> element is used to enclose each list item in ordered lists too.

Here is how the ordered list looks in the browser:

1. List item
2. List item
3. List item

Number Types

You can set the number types used in an ordered list using the type attribute. Here are the number types you can use:

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

Here is how these number types look in the browser:

1. Alphabetic numbers (a, b, c etc.).

1. Roman literals (i, ii, iii etc.).

1. Numbers (1, 2, 3 etc.).

You can also set the first number to use in the list, using the start attribute. Here are a few examples:

<ol type="a" start="3"><li>Alphabetic numbers.</li></ol>
<ol type="i" start="3"><li>Roman literals.</li></ol>
<ol type="1" start="3"><li>Numbers.</li></ol>

In this example each of the ordered lists are set to start from the 3rd numeral in their number sequences, because the value of the start is set to 3.

Here is how the lists look in a browser:

3. Alphabetic numbers.

3. Roman literals.

3. Numbers.