A list in HTML is a collection of items that are displayed in a list format with bullet points.
The <ul> tag creates an unordered list and the <ol> tag creates an ordered list.
Inside these lists are <li> tags which specify the list items.
Two lists: an unordered list with bullet points, and an ordered list with numbers.
<ul>
<li>Toyota</li>
<li>Ford</li>
<li>Honda</li>
</ul>
<ol>
<li>Lexus</li>
<li>Tesla</li>
<li>Mercedes</li>
</ol>
The <ul> tag creates an unordered list.
List items are added with nested <li> tags.
<ul>
<li>Paper</li>
<li>Pencils</li>
<li>Scissors</li>
</ul>
For details on unordered lists, see our HTML ul tag reference.
To set the style of the item markers use the CSS list-style-type property.
These are the built-in types.
| Type | Description |
|---|---|
disc |
Sets the list item to a bullet (default) |
circle |
Sets the list item to a circle |
square |
Sets the list item to a square |
none |
The list items will not be marked |
Let's look at each one.
An unordered list with a disc style marker.
<ul style="list-style-type:disc;">
<li>Paper</li>
<li>Pencils</li>
<li>Scissors</li>
</ul>
An unordered list with a circle style marker.
<ul style="list-style-type:circle;">
<li>Paper</li>
<li>Pencils</li>
<li>Scissors</li>
</ul>
An unordered list with a square style marker.
<ul style="list-style-type:square;">
<li>Paper</li>
<li>Pencils</li>
<li>Scissors</li>
</ul>
An unordered list with a none style marker, i.e. no marker.
<ul style="list-style-type:none;">
<li>Paper</li>
<li>Pencils</li>
<li>Scissors</li>
</ul>
The <ol> tag creates an ordered list.
List items are added with nested <li> tags.
<ol>
<li>Paper</li>
<li>Pencils</li>
<li>Scissors</li>
</ol>
For details on ordered lists, see our HTML ol tag reference.
Use the type attribute on the <ol> tag to define the item numbering type.
| Type | Description |
|---|---|
type="1" |
The list items will be numbered with numbers (default) |
type="A" |
The list items will be numbered with uppercase letters |
type="a" |
The list items will be numbered with lowercase letters |
type="I" |
The list items will be numbered with uppercase roman numbers |
type="i" |
The list items will be numbered with lowercase roman numbers |
An ordered list with a numbers type marker.
<ol type="1">
<li>Paper</li>
<li>Pencils</li>
<li>Scissors</li>
</ol>
By default the numbers in HTML lists display in ascending order: 1, 2, 3, etc.
You can reverse the numbers by adding the reversed attribute.
An ordered list with numbering in reverse order.
<ol type="1" reversed>
<li>Paper</li>
<li>Pencils</li>
<li>Scissors</li>
</ol>
Tip: The reversed attribute does not reverse the items -- just the numbering.
An ordered list with a uppercase letters.
<ol type="A">
<li>Paper</li>
<li>Pencils</li>
<li>Scissors</li>
</ol>
An ordered list with lowercase letters.
<ol type="a">
<li>Paper</li>
<li>Pencils</li>
<li>Scissors</li>
</ol>
An ordered list with uppercase roman numbers.
<ol type="I">
<li>Paper</li>
<li>Pencils</li>
<li>Scissors</li>
</ol>
An ordered list with lowercase roman numbers.
<ol type="i">
<li>Paper</li>
<li>Pencils</li>
<li>Scissors</li>
</ol>
In addition to the built-in markers you can also create custom image markers using CSS.
This example shows how to use the list-style-image CSS property for this:
<style>
.arrow-marker {
list-style-image: url('/img/html/arrow-marker.png');
}
</style>
<ul class="arrow-marker">
<li>Paper</li>
<li>Pencils</li>
<li>Scissors</li>
</ul>
For details on the list-style-image property, visit our CSS list-style-image property reference.
By default, ordered lists start counting at 1.
To start at a different number use the start attribute.
<ol start="50">
<li>Paper</li>
<li>Pencil</li>
<li>Scissor</li>
</ol>
Create nested HTML lists by placing <ul> or <ol> lists inside a parent <li> element.
<ul>
<li>Paper</li>
<li>Pencils
<ul>
<li>Black Pencils</li>
<li>Color Pencils</li>
</ul>
</li>
<li>Scissors</li>
</ul>
A Description list is a glossary with one or more terms and descriptions.
To create a description list use the <dl> tag.
Terms and descriptions can then be added with <dt> and <dd> tags respectively.
An example description list.
<dl>
<dt>Paper</dt>
<dd>- great for pencil drawing</dd>
<dt>Pencils</dt>
<dd>- draw on paper or canvas</dd>
</dl>
For details on HTML description lists, visit our HTML dl tag reference.
