HTML Lists
In HTML, there are three main types of lists: unordered, ordered and description lists. Each of them is defined using different tags
In HTML, there are three types of lists: unordered, ordered and description lists. Each of them is defined using different tags. Let’s have a look.
HTML Unordered Lists
We use unordered lists to group items having no numerical order. When changing the order of list items, the meaning will not change. To create an unordered list, we use the <ul> tag. This tag comes in pairs, the content is written between opening <ul> and closing </ul> tags.
Each element of an unordered list is declared inside the <li> tag.
Example of the HTML <ul> tag for creating an unordered list:
An example of an unordered list|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>An unordered list:</h1>
<ul>
<li>This is a list item</li>
<li>This is another list item</li>
<li>This is one more list item</li>
</ul>
</body>
</html>The items in unordered lists are marked with bullets (small black circles) by default. However, the default bullet style for the list items can be changed using a type attribute.
The type attribute is used to change the default bullet style for the list items. Note: The type attribute is deprecated in HTML5. Use the CSS list-style-type property instead.
Example of the HTML <ul> tag for creating an unordered list, where the items are marked with bullets:
Example of a type attribute for HTML lists
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul type="circle">
<li>List item </li>
<li>List item</li>
<li>List item</li>
</ul>
<ul type="square">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</body>
</html>Result
You can also use the CSS list-style-type or list-style-image property to specify the type of a list item element.
Example of the HTML <ul> tag used with the CSS list-style-type property for creating an unordered list:
Example of a list-style-type property
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Examples of unordered lists:</h2>
<ul style="list-style-type: square;">
<li>Cold Drinks</li>
<li>Hot Drinks</li>
<li>Ice-Creams</li>
</ul>
<ul style="list-style-type: disc;">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ul>
<ul style="list-style-type: circle;">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ul>
</body>
</html>HTML Ordered Lists
HTML ordered list is used for listing items that are marked with numbers. It starts with the <ol> tag. This tag comes in pairs, the content is written between opening <ol> and closing </ol> tags.
Each item in the ordered list starts with opening <li> tag and ends with </li> closing tag.
Example of the HTML <ol> tag for creating an ordered list:
Example of an HTML ordered list|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>An ordered list:</h1>
<ol>
<li>This is List item number 1</li>
<li>This is List item number 2</li>
<li>This is List item number 3</li>
</ol>
</body>
</html>The items in the ordered list are marked with numbers by default. If you want to create ordered list with alphabet or Roman numbers, you just need to add type="a" or type="I" to the <ol> tag. Note: The type attribute is deprecated in HTML5. Use the CSS list-style-type property instead.
Example of the HTML <ol> tag for creating an ordered list with alphabet and Roman numbers:
Example of different marks of list items
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h3>A numbered list:</h3>
<ol>
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>An alphabetized list:</h3>
<ol type="A">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>An alphabetized list (lowercase letters):</h3>
<ol type="a">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>A numbered list (Roman numerals):</h3>
<ol type="I">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>A numbered list (lowercase Roman numerals):</h3>
<ol type="i">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
</body>
</html>HTML Description Lists
HTML description lists are used to pair terms with their descriptions, similar to a dictionary or glossary.
To create a description list, we use the <dl> tag. This tag comes in pairs.
In <dl>, we use <dt> tags for a term/name in a description list and <dd> for a description of a term/name in a description list.
Example of the HTML <dl> tag for creating a description list:
Example of a description list|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Description Lists:</h1>
<dl>
<dt>Tea</dt>
<dd>hot drink</dd>
<dt>Juice</dt>
<dd>cold drink</dd>
</dl>
</body>
</html>Result
HTML Nested Lists:
A nested list contains a list inside a list.
Example of an HTML nested list:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>A nested HTML list</h2>
<p>A nested list contains a list inside a list.</p>
<ul>
<li>Copybooks</li>
<li>
Books
<ul>
<li>Detective books</li>
<li>Roman books</li>
<li>Fairy tale books</li>
</ul>
</li>
</ul>
</body>
</html>List Counting Control
By default, the enumeration in an ordered list starts from 1. Use the start attribute to start counting from a specified number. You can also use the reversed attribute to count downwards, or the value attribute on a specific <li> to set its number manually.
Example of an HTML list for counting from a specified number:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>List counting control</h2>
<p>By default, the numeration in an ordered list starts from 1. Use the start attribute to start counting from a specified number.</p>
<ol start="40">
<li>Pen</li>
<li>Pencil</li>
<li>Copybook</li>
</ol>
<ol type="I" start="40">
<li>Pen</li>
<li>Pencil</li>
<li>Copybook</li>
</ol>
</body>
</html>Horizontal List with CSS
HTML lists can be styled in many different ways with CSS.
You can style HTML lists using different CSS properties. For example, you can create a navigation menu styling the list horizontally.
Example of a horizontal list with CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
background-color: #F44336;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #981816;
}
</style>
</head>
<body>
<h2>Navigation Menu Example</h2>
<p>
You can style HTML lists using different CSS properties. For example, you can create a navigation menu styling the list horizontally.
</p>
<ul>
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="https://www.w3docs.com/tool/">Tools</a>
</li>
<li>
<a href="https://www.w3docs.com/snippets">Snippets</a>
</li>
<li>
<a href="https://www.w3docs.com/quiz/">Quizzes</a>
</li>
<li>
<a href="https://www.w3docs.com/string-functions/">String Functions</a>
</li>
</ul>
</body>
</html>Practice
What are the different types of HTML lists as stated in the provided article?