HTML List Example
Unordered HTML List
An unordered list will be starting with the <ul> tag. Each list item will be starting with the <li> tag.
The list items will be listed with bullets (small black circles) by default:
Unordered HTML List - Choose List Item Marker
The CSS list-style-type property is used for defining the list item marker's style:
Example
| Value | Description |
|---|---|
| disc | Displays the list item marker as a bullet (default) |
| circle | Displays the list item marker to a circle |
| square | Displays the list item marker to a square |
| none | The list items will not get marked |
Example - Disc
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself
Example - Circle
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself
Example - Square
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself
Example - None
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself
Ordered HTML List
An ordered list will start with the <ol> tag. Each list item will be starting with the <li> tag.
The list items will be having numbers by default:
Ordered HTML List - The Type Attribute
The type attribute of the <ol> tag, is used to define the list item marker's type:
| Type | Description |
|---|---|
| type="1" | The list items is numbered with numbers (default) |
| type="A" | The list items is numbered with uppercase letters |
| type="a" | The list items is numbered with lowercase letters |
| type="I" | The list items is numbered with uppercase roman numbers |
| type="i" | The list items is numbered with lowercase roman numbers |
Uppercase Roman Numbers:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself
Lowercase Roman Numbers:
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself
HTML Description Lists
HTML is also supporting description lists.
A description list is known as a list of terms, which is having a description of each term.
The <dl> tag is used to define the description list, the <dt> tag is used to define the term (name), and the <dd> tag is used to describe each term:
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Try it Yourself
Nested HTML Lists
List can be nested (lists inside lists):
Example
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Try it Yourself
Note: List items can also have new list, and few other HTML elements, like images, links, etc.
Horizontal Lists
HTML lists styling can be done in many different ways using CSS.
One of the most popular way is to style a list horizontally, for creating a menu:
Example
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float:
left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a class="active"
href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Chapter Summary
HTML List Tags