HTML Lists
HTML lists let you group a set of related items together.
Example
An unordered list and an ordered list.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lists Intro</title>
</head>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<h2>An ordered HTML list</h2>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol>
</body>
</html>
Unordered HTML List
An unordered list starts with the <ul> tag, and each item starts with the <li> tag. By default the items are marked with bullets (small black circles).
Example
A bulleted list of drinks.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unordered List</title>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Ordered HTML List
An ordered list starts with the <ol> tag, and each item starts with the <li> tag. By default the items are marked with numbers.
Example
A numbered list of drinks.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ordered List</title>
</head>
<body>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
HTML Description Lists
A description list is a list of terms with a description for each. The <dl> tag defines the list, the <dt> tag defines each term, and the <dd> tag describes it.
Example
A description list of drinks and what they are.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Description List</title>
</head>
<body>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
HTML List Tags
The list-related tags are: <ul> (an unordered list), <ol> (an ordered list), <li> (a list item), <dl> (a description list), <dt> (a term in a description list), and <dd> (the description of the term).