The HTML list element is very important for categorizing a group of related items into a list.
HTML has two types of lists, the ordered and unordered lists.
Ordered HTML List
The ordered list is represented by the <ol> tag as the parent tag followed by the child tag, <li>. An ordered list follows a progression, either numerically or alphabetically, when listing items.
Here is an example;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
</head>
<body>
<p>Six classes of food:</p>
<ol>
<li>Carbohydrates</li>
<li>Protein</li>
<li>Vitamin</li>
<li>Fats and Oil</li>
<li>Mineral salt</li>
<li>Water</li>
</ol>
</body>
</html>Numbers are not only used in the Ordered list to arrange items sequentially. There are also other types of ordered list values that can be used.
They are:
- Uppercase letters
- Lowercase letters
- Lowercase roman numerals
- Uppercase roman numerals
To use the uppercase letters as the ordered list value, set the type to “A.”
Here is an example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
</head>
<body>
<p>TYPES OF FOOD</p>
<ol type="A">
<li>Pounded Yam</li>
<li>Jollof rice</li>
<li>Peppersoup</li>
</ol>
</body>
</html>
To use the lowercase letters as the ordered list value, set the type to “a.”
Here is an example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
</head>
<body>
<p>TYPES OF FOOD</p>
<ol type="a">
<li>Pounded Yam</li>
<li>Jollof rice</li>
<li>Peppersoup</li>
</ol>
</body>
</html>
To use uppercase roman numerals as the ordered list value, set the type to “I.”
Here is an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
</head>
<body>
<p>TYPES OF FOOD</p>
<ol type="I">
<li>Pounded Yam</li>
<li>Jollof rice</li>
<li>Peppersoup</li>
</ol>
</body>
</html>
These different ordered list value types are important for creating sub-list items under a list item.
The Start Attribute in HTML Ordered List
The ordered list has an attribute value, start. You can use the start attribute to begin from a specific numeric value rather than 1. If the list item is to begin from 50, you can use the start attribute and set the value to 50 for your list items.
Here is an example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
</head>
<body>
<p>TYPES OF FOOD</p>
<ol start="50">
<li>Pounded Yam</li>
<li>Jollof rice</li>
<li>Peppersoup</li>
</ol>
</body>
</html>
The Unordered HTML List
An unordered HTML list is used to arrange items in no order of progression. It is used to randomly list items in a group of related items. The <ul> tag represents the unordered list as the parent tag, followed by the child tag <li>.
Here is an example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
</head>
<body>
<p>TYPES OF FOOD</p>
<ul>
<li>Pounded Yam</li>
<li>Jollof rice</li>
<li>Peppersoup</li>
</ul>
</body>
</html>
Type of Unordered HTML List Style
Like in the ordered list, the unordered list style is not only represented by the bullet marker. There are also four other list styles to use.
They are:
- Circle: The unordered list style becomes circular.
- Square: The unordered list style becomes a square.
- None: The unordered list style will not be bulleted.
- Disc: This is the default bulleted marking.
To use the square list style, we’ll use the list-style-type property and set the value to square.
Here is an example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
</head>
<body>
<p>TYPES OF FOOD</p>
<ul style="list-style-type:square;">
<li>Pounded Yam</li>
<li>Jollof rice</li>
<li>Peppersoup</li>
</ul>
</body>
</html>
To use a circle list style, we’ll set the list-style-type value to a circle.
Here is an example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
</head>
<body>
<p>TYPES OF FOOD</p>
<ul style="list-style-type:circle;">
<li>Pounded Yam</li>
<li>Jollof rice</li>
<li>Peppersoup</li>
</ul>
</body>
</html>
To set the list-style-type to none, set the value to none. You should know that the list-style-type none value is important in creating menus on a website.
Here is an example;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
</head>
<body>
<p>TYPES OF FOOD</p>
<ul style="list-style-type:none;">
<li>Pounded Yam</li>
<li>Jollof rice</li>
<li>Peppersoup</li>
</ul>
</body>
</html>
HTML Description List HTML
In the html description list element, the tags <dd>, <dl>, and <dt> are to be used.
<dl> represents the description list, which is the parent tag.
<dt> represents the description term.
<dd> represents the description of the description term.
Here is an example;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
</head>
<body>
<h2>TYPES OF FAMILY</h2>
<dl>
<dt>Nuclear Family</dt>
<dd>A family that comprises a father, mother, and child(ren).</dd>
<dt>Extended Family</dt>
<dd>A family of extended relations.</dd>
</dl>
</body>
</html>
Nesting Ordered HTML List Into Unordered HTML List
It is possible to use both the ordered and unordered lists together, especially when creating sub-lists of a list item.
Here is an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
</head>
<body>
<h3>CLASSES OF FOOD AND THEIR EXAMPLES</h3>
<ol>
<li>Carbohydrates</li>
<ul>
<li>Rice</li>
<li>Yam</li>
</ul>
<li>Protein</li>
<ul>
<li>Meat</li>
<li>Fish</li>
</ul>
</ol>
</body>
</html>
HTML lists appear vertically by default, but with CSS, it can be changed to appear vertically, as in the case of menus.
