HTML Lists
HTML lists allow web developers to group a set of related items in lists.
Example of unordered HTML list:
- Item
- Item
- Item
- Item
Example of ordered HTML 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:
Example
<!DOCTYPE html> <html> <body> <h2>An unordered HTML list</h2> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html>
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:
Example
<!DOCTYPE html> <html> <body> <h2>An ordered HTML list</h2> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html>
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
<!DOCTYPE html> <html> <body> <h2>A Description List</h2> <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> </body> </html>
List Tags at a Glance
Tag | Description |
<ul> | Defines an unordered list |
<ol> | Defines an ordered list |
<li> | Defines a list item |
<dl> | Defines a description list |
<dt> | Defines a term in a description list |
<dd> | Describes the term in a description list |