There are three main types of list in HTML to structure information on web pages:
- Unordered lists
- Ordered lists
- Definition lists
You can also nest lists within each other.
What is an unordered list in HTML?
An unordered list (<ul> and <li>) show items with bullet points. The order of items in an unordered list is not important.
- An unordered list begins with the <ul> tag.
- Each item within the list starts with an <li> tag (list item).
- The <li> element denotes an item in a ul, ol, or menu element.
- Inside a list item, include paragraphs, line breaks, images, links, and other lists.
- Style the bullet points using the type attribute within the <ul> tag or with CSS properties like list-style-type, list-style-image, and list-style-position. Acceptable values for list-style-type include disc (default), circle, square, and none.
Unordered list in HTML example:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Example Page</title>
</head>
<body>
<h4>An Unordered List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>This will produce a bulleted list in the browser.
How to create an Ordered List in HTML
An ordered list (<ol> and <li>)displays items in a numbered sequence. Use an ordered list when the order of the items is important or needs to be highlighted.
- An ordered list starts with the <ol> tag.
- Each item in the list also starts with an <li> tag.
- By default, the list items are numbered sequentially.
- You can change the type of numbering using the type attribute within the <ol> tag. Possible values for type include “1” (default, numerals), “a” (lowercase letters), “A” (uppercase letters), “i” (lowercase Roman numerals), and “I” (uppercase Roman numerals).
- Specify a starting number for the list using the start attribute in the <ol> tag. The value attribute on an <li> element within an <ol> can be used for nonsequential numbering.
ordered list in HTML with example:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Example Page</title>
</head>
<body>
<h4>An Ordered List:</h4>
<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>
</body>
</html>This will produce a numbered list.
Explain Definition List in HTML
A definition list (<dl>, <dt>, and <dd>) is used to shown a list of terms and their corresponding definitions or descriptions. It’s also referred to as a description list.
- A definition list starts with the <dl> tag (definition list).
- Each term in the list starts with a <dt> tag (definition term).
- Each description for a term starts with a <dd> tag (definition description).
- A name-value in a definition list can have more than one name (<dt>) and more than one value (<dd>), which can denote alternatives.
- Inside the <dd> tag, you can include various content like paragraphs, line breaks, images, links, and other lists.
Example of a definition list in html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Example Page</title>
</head>
<body>
<h4>A Definition List:</h4>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
</html>This will display the terms and their descriptions, with the description depressed.
Nested List in HTML5
You can nest lists inside list items to create classified structures or sub-lists. The nested list be a child of the <li> element. Browsers usually indentation nested lists further than their parent list and may change the style of the item markers (e.g., bullet points) in nested unordered lists. You can also nest different types of lists within each other.
Nested List in HTML Example:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Example Page</title>
</head>
<body>
<h4>A Nested Unordered List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
<h4>A Nested Ordered List within an Unordered List:</h4>
<ol>
<li>Hello, list!</li>
<li>
<ul>
<li>Hello, nested list!</li>
</ul>
</li>
</ol>
</body>
</html>HTML5 Topics