In this article we learn about different types of lists in HTML5 like ordered lists, unordered lists, and description lists along with suitable examples on each type of list.
To display a list of items in a web page we can use the HTML5 lists. The list can contain items that are either ordered or unordered. All the three types of lists are block elements which by default contain a space above and below the list. First, let’s look at how to display ordered list of items using ordered lists.
Ordered Lists
To display a list of items where the items follow a certain order, we can use ordered lists. The entire list is written in between <ol> tags, and each list item in the list is written in between <li> tags. Following HTML5 code demonstrates an ordered list:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Basic HTML webpage</title>
<meta charset="utf-8">
</head>
<body>
<h1>HTML5 Lists</h1>
<h2>List of toppers</h2>
<ol>
<li>Manoj</li>
<li>Shalini</li>
<li>Manohar</li>
<li>Harshita</li>
<li>Ramesh</li>
</ol>
</body>
</html>
By default the ordering is maintained using numbers. This can be changed to lowercase and uppercase letters or lowercase and uppercase roman numbers. To change the type of ordering, we have to use the type attribute as shown in the following HTML5 code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Basic HTML webpage</title>
<meta charset="utf-8">
</head>
<body>
<h1>HTML5 Lists</h1>
<h2>List of toppers</h2>
<ol type="A">
<li>Manoj</li>
<li>Shalini</li>
<li>Manohar</li>
<li>Harshita</li>
<li>Ramesh</li>
</ol>
</body>
</html>
The above list replaces numbers with uppercase letters. Similarly you can use roman numbers also either in uppercase or lowercase.
To start the ordering from a different number or letter, we can use the start attribute as shown in the HTML5 code below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Basic HTML webpage</title>
<meta charset="utf-8">
</head>
<body>
<h1>HTML5 Lists</h1>
<h2>List of toppers</h2>
<ol type="1" start="5">
<li>Manoj</li>
<li>Shalini</li>
<li>Manohar</li>
<li>Harshita</li>
<li>Ramesh</li>
</ol>
</body>
</html>
In the above list, the ordering starts from number 5 as mentioned with the start attribute in the <ol> tag.
In HTML5, we can also reverse the ordering in the list by using the reversed attribute as shown in the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Basic HTML webpage</title>
<meta charset="utf-8">
</head>
<body>
<h1>HTML5 Lists</h1>
<h2>List of toppers</h2>
<ol type="1" start="5" reversed>
<li>Manoj</li>
<li>Shalini</li>
<li>Manohar</li>
<li>Harshita</li>
<li>Ramesh</li>
</ol>
</body>
</html>
In the above list the ordering will start from 5 and will go in the reverse direction as 4,3,2,etc. The reversed attribute is a HTML5 only attribute.
Unordered Lists
To display a list of items with bullets or other list markers like in Microsoft Word, we can use unordered lists. The entire list is written in between <ul> tags and each list item is written in between <li> tags. Following HTML5 code demonstrates an unordered list which displays a list of countries:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Basic HTML webpage</title>
<meta charset="utf-8">
</head>
<body>
<h1>HTML5 Lists</h1>
<h2>List of countries</h2>
<ul>
<li>USA</li>
<li>UK</li>
<li>India</li>
<li>China</li>
<li>Russia</li>
</ul>
</body>
</html>
Like ordered lists, we can change the list markers in unordered lists. Different list markers for unordered lists are disc (default), square, and circle. But changing the list marker using the type attribute is obsolete now-a-days. Later we will see how to change the list markers in an unordered list using other techniques.
Description Lists
To display terms and their respective definitions, we can use description lists in HTML5. Previously these were called as definition lists. A list item in a description list contains two parts. One is the definition term and the other is the term definition.
The entire description list in written between <dl> tags. The definition term is written between <dt> tags and the term definition is written between <dd> tags. Following HTML5 code demonstrates a description list:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Basic HTML webpage</title>
<meta charset="utf-8">
</head>
<body>
<h1>HTML5 Lists</h1>
<h2>Important Terms and Definitions</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language is used to describe the content in the web page</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets is used to style the content in the web page</dd>
</dl>
</body>
</html>
The term definitions are by default indented from the left margin of the web page. The description lists can also be used for displaying frequently asked questions and answers.
