To create lists in HTML5, the elements <ol>(numbered list) and <ul>(unordered list) are used:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List In HTML5</title>
</head>
<body>
<h2>Heading Goes here</h2>
<ol>
<li>Volkswagen</li>
<li>Ford Motor</li>
<li>Daimler</li>
<li>Toyota</li>
</ol>
<h2>Heading Goes here</h2>
<ul>
<li>Volkswagen</li>
<li>Ford Motor</li>
<li>Daimler</li>
<li>Toyota</li>
</ul>
</body>
</html>
In a numbered list, the default numbering of items is standard 1. In an unnumbered list, each item is preceded by a black dot.
If necessary, we can customize the numbering or the symbol displayed next to the element using the list-style-type style . This style can take on many different meanings. Let us mention only the main and frequently used ones. For numbered lists, the style list-style-typecan take on the following values:
- decimal: decimal numbers, counting from 1
- decimal-leading-zero: decimal numbers preceded by zero, for example 01, 02, 03, … 98, 99
- lower-roman: lowercase roman numerals, e.g. i, ii, iii, iv, v
- upper-roman: uppercase roman numerals such as I, II, III, IV, V …
- lower-alpha: lowercase roman letters, e.g. a, b, c …, z
- upper-alpha: uppercase roman letters, eg A, B, C,… Z
For numbered lists, using the start attribute, you can additionally specify the character from which the numbering will begin. For example:
<h2>list-style-type = decimal</h2>
<ol style="list-style-type:decimal;" start="3">
<li>Volkswagen</li>
<li>Ford Motor</li>
<li>Daimler</li>
<li>Toyota</li>
</ol>
<h2>list-style-type = upper-roman</h2>
<ul style="list-style-type:upper-roman;">
<li>Volkswagen Plus</li>
<li>Ford Motor Edge</li>
<li>Nexus 6P</li>
<li>Toyota XL</li>
</ul>
<h2>list-style-type = lower-alpha</h2>
<ul style="list-style-type:lower-alpha;">
<li>LG G 5</li>
<li>Huawei P8</li>
<li>Asus ZenFone 2</li>
</ul>
For an unordered list, the attribute list-style-typecan take the following values:
- disc: black disc
- circle: empty circle
- square: black square
For example:
<h2>list-style-type = disc</h2>
<ul style="list-style-type:disc;">
<li>Volkswagen</li>
<li>Ford Motor</li>
<li>Daimler</li>
<li>Toyota</li>
</ul>
<h2>list-style-type = circle</h2>
<ul style="list-style-type:circle;">
<li>Volkswagen Plus</li>
<li>Ford Motor Edge</li>
<li>Nexus 6P</li>
<li>Toyota XL</li>
</ul>
<h2>list-style-type = square</h2>
<ul style="list-style-type:square;">
<li>LG G 5</li>
<li>Huawei P8</li>
<li>Asus ZenFone 2</li>
</ul>
Another interesting option for customizing lists is provided by the list-style-image style . It sets the image to be displayed next to the list item:
<ul style="list-style-image:url(list_icon.png);">
<li>Volkswagen</li>
<li>Ford Motor</li>
<li>Daimler</li>
<li>Toyota</li>
</ul>
The style list-style-imagetakes as a value url(list_icon.png), where “list_icon.png” is the name of the image file. That is, in this case, it is assumed that in the same folder with the index.html web page, I have the list_icon.png image file .
Horizontal list
One of the common ways to style lists is to create a horizontal list. To do this, set the style for all elements of the list display:inline:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal list in HTML5</title>
<style>
ul#list li{
display:inline;
}
</style>
</head>
<body>
<ul>
<li>Volkswagen</li>
<li>Ford Motor</li>
<li>Daimler</li>
<li>Toyota</li>
</ul>
</body>
</html>