HTML Lists
Example of an unordered list and an ordered list in HTML:
Unordered List:
- Item
- Item
- Item
- Item
Ordered List:
- First item
- Second item
- Third item
- Fourth item
Unordered HTML Lists
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):
Unordered HTML Lists - The Style Attribute
A style attribute can be added to an unordered list, to define the style of the marker:
| Style | Description |
|---|---|
| list-style-type:disc | The list items will be marked with bullets (default) |
| list-style-type:circle | The list items will be marked with circles |
| list-style-type:square | The list items will be marked with squares |
| list-style-type:none | The list items will not be marked |
Disc:
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »
Circle:
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »
Square:
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »
None:
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »
Ordered HTML Lists
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers:
Ordered HTML Lists - The Type Attribute
A type attribute can be added to an ordered list, to define the type of the 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 |
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 also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes 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 »
 |
List items can contain new list, and other HTML elements, like images and links, etc. |
|---|
Horizontal Lists
HTML lists can be styled in many different ways with CSS.
One popular way, is to style a list to be displayed horizontally:
Example
<!DOCTYPE html>
<html>
<head>
<style>
ul#menu li {
display:inline;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
</body>
</html>
Try it Yourself »
With a little extra style, you can make it look like a menu:
Example
ul#menu {
padding: 0;
}
ul#menu li {
display:
inline;
}
ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: orange;
}
Try it Yourself »
Chapter Summary
- Use the HTML <ul> element to define an unordered list
- Use the HTML style attribute to define the bullet style
- Use the HTML <ol> element to define an ordered list
- Use the HTML type attribute to define the numbering type
- Use the HTML <li> element to define a list item
- Use the HTML <dl> element to define a description list
- Use the HTML <dt> element to define the description term
- Use the HTML <dd> element to define the description data
- Lists can be nested inside lists
- List items can contain other HTML elements
- Use the CSS property display:inline to display a list horizontally