Author: MDBootstrap
HTML List Example
An Unordered List:
- Item
- Item
- Item
- Item
An Ordered List:
- First item
- Second item
- Third item
- Fourth item
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts
with the
<li> tag.
The list items will be marked with bullets (small black circles) by default:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Live preview
- Coffee
- Tea
- Milk
Unordered HTML List - Choose List Item Marker
The CSS list-style-type property is used to define the style of the
list item marker:
| Value | Description |
|---|---|
| disc | Sets the list item marker to a bullet (default) |
| circle | Sets the list item marker to a circle |
| square | Sets the list item marker to a square |
| none | The list items will not be marked |
Example - Disc
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Live preview
- Coffee
- Tea
- Milk
Example - Circle
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Live preview
- Coffee
- Tea
- Milk
Example - Square
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Live preview
- Coffee
- Tea
- Milk
Example - None
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Live preview
- Coffee
- Tea
- Milk
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts
with the <li> tag.
The list items will be marked with numbers by default:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Live preview
- Coffee
- Tea
- Milk
Ordered HTML List - The Type Attribute
The type attribute of the <ol>
tag, defines the type of the
list item marker:
| 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 |
Example:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Live preview
- Coffee
- Tea
- Milk
Previous lesson Next lesson
Spread the word:
