In This Tutorial
- 1 The Lists of HTML
- 2 A few examples of lists are
- 3 HTML ul list type
- 4 HTML ol list type
- 5 HTML li
- 6 HTML dl list type
- 7 Related
The Lists of HTML
The List is the way to present information in the form of a listing. This is quite useful for presenting information like product features, services, job requirements, shopping list items etc. in the list format to your web pages.
The lists are also used for navigation/menu purpose.
Different types of HTML lists are available:
- Unordered lists made with the <ul> tag.
- Ordered lists are created by using the <ol> tag.
- Description list with the <dl> tag.
All these list types are explained below with examples. You can also apply CSS styles to the lists.
A few examples of lists are
Example of an Unordered list – ul
Numbered list example starting other than 1
HTML ul list type
The unordered lists in HTML are created by using the <ul> tag. The following example creates an unordered list:
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPE html>
<html>
<head>
<title>Lists</title>
</head>
<body>
<p>A few color names</p>
<ul>
<li>Black</li>
<li>White</li>
<li>Yellow</li>
<li>Red</li>
<li>Orange</li>
</ul>
</body>
</html>
|
Learn more about ul list in its chapter.
HTML ol list type
The ordered lists are created by using the <ol> tag of HTML. The <ol> tag also uses <li> tag to create the list items just like the <ul> tag. You can order lists numerically or alphabetically.
By default, the ordered lists are ordered numerically, however, you can use type attribute of the <ol> tag to specify how to order list items.
Following examples shows how to use the <ol> tag with the type attribute.
A basic HTML ordered list example
The example creates a list alphabetically.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPE html>
<html>
<head>
<title>Lists</title>
</head>
<body>
<p>A few color names</p>
<ol type=“a”>
<li>Black</li>
<li>White</li>
<li>Yellow</li>
<li>Red</li>
<li>Orange</li>
</ol>
</body>
</html>
|
HTML numbered list example
You can create a numbered list by using the type = 1. Although, the default list style is also numeric. So, if you do not specify any list style type it will create a numbered list. The following example creates a numbered list by using the <ol> tag as follows:
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPE html>
<html>
<head>
<title>Lists</title>
</head>
<body>
<p>A few color names</p>
<ol type=“1”>
<li>Black</li>
<li>White</li>
<li>Yellow</li>
<li>Red</li>
<li>Orange</li>
</ol>
</body>
</html>
|
Numbered list example starting other than 1
The following example starts the numbered list from digit 5 by using the start attribute of the <ol> tag.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPE html>
<html>
<head>
<title>Lists</title>
</head>
<body>
<p>A few color names</p>
<ol start=“5”>
<li>Black</li>
<li>White</li>
<li>Yellow</li>
<li>Red</li>
<li>Orange</li>
</ol>
</body>
</html>
|
HTML li
The <li> tag is used to create the list items. Whether you are creating the ordered or unordered lists, you have to use the <li>List value</li> tag series inside the <ol> or <ul> tags to create the complete lists.
A demo of li tag inside <ol>
Following example shows using the <li> tag inside the ordered list.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Lists</title>
</head>
<body>
<p>A few color names</p>
<ol>
<li>Black</li>
<li>White</li>
<li>Yellow</li>
<li>Red</li>
<li>Orange</li>
</ol>
</body>
</html>
|
HTML li inside the <ul> example
Following example creates list by using the <li> tag inside <ul> tag.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPE html>
<html>
<head>
<title>Lists</title>
</head>
<body>
<p>A few color names</p>
<ul>
<li>Black</li>
<li>White</li>
<li>Yellow</li>
<li>Red</li>
<li>Orange</li>
</ul>
</body>
</html>
|
HTML dl list type
The third type of list supported in HTML is the description list. The description list uses the <dl> tag. The description list is the paired list of name and description. The basic structure of a description list is as follows:
<dl>
<dt>term/name</dt>
<dd>defines description or value of term</dd>
<dt>term/name</dt>
<dd>defines description or value of term</dd>
</dl>
Where:
- <dl> tag creates description list
- <dt> defines term or name
- <dd> defines term’s description
Example of using dl list type
The following example shows how to use the <dl> tag to create a description list with <dt> and <dd> tags.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html>
<html>
<head>
<title>Lists</title>
</head>
<body>
<p>Home Appliances</p>
<dl>
<dt>Refrigerator</dt>
<dd>A refrigerator (colloquially fridge) is a common household appliance that consists of a thermally insulated compartment and a heat pump</dd>
<dt>Microwave</dt>
<dd>Microwaves are a form of electromagnetic radiation with wavelengths ranging from as long as one meter to as short as one millimete</dd>
<dt>Iron</dt>
<dd>Ironing is the use of a heated tool (an iron) to remove wrinkles from fabric</dd>
</dl>
</body>
</html>
|
Also see HTML div tag CSS Lists
Leave A Comment?