- HTML4 Tutorial
- The Web
- HTML and URLs
- HTML Element Structure
- HTML Document Structure
- HTML - Create Your First HTML Document
- HTML Text Formatting Elements
- HTML Entities
- HTML Lists
- HTML Links
- HTML and Images
- HTML Tables
- HTML Forms
- HTML div and span Elements
- HTML iframe
- HTML Meta Tags
- CSS Introduction
- XHTML Introduction
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.
You can choose different bullet types for the unordered list using the
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:
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:
- List item
- List item
- List item
You can set the number types used in an ordered list using the
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:
- Alphabetic numbers (a, b, c etc.).
- Roman literals (i, ii, iii etc.).
- Numbers (1, 2, 3 etc.).
You can also set the first number to use in the list, using the
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:
- Alphabetic numbers.
- Roman literals.