HTML Lists
An HTML list is a record of related information used to display the data or any information on web pages in the ordered or unordered form.
HTML List Example
Basic Implementation of HTML lists.
<!DOCTYPE html>
<html>
<head>
<title>w3wiki</title>
</head>
<body>
<h2>Welcome To w3wiki Learning</h2>
<h5>List of available courses</h5>
<ul>
<li>Data Structures & Algorithm</li>
<li>Web Technology</li>
<li>Aptitude & Logical Reasoning</li>
<li>Programming Languages</li>
</ul>
<h5>Data Structures topics</h5>
<ol>
<li>Array</li>
<li>Linked List</li>
<li>Stacks</li>
<li>Queues</li>
<li>Trees</li>
<li>Graphs</li>
</ol>
</body>
</html>
Output:
There are three types of lists in HTML:
Table of Content
- HTML Unordered List or Bulleted List
- HTML Ordered List
- HTML Description List
HTML List Tags
Here is the list of all lists tags HTML:
The HTML Unordered List or Bulleted List
The unordered list items are marked with bullets. It is also known as bulleted lists. An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
Syntax:
<ul> list of items </ul>
Attribute: This tag contains two attributes which are listed below:
Example: This example describes the unordered list.
<!DOCTYPE html>
<html>
<body>
<h2>Grocery list</h2>
<ul>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ul>
</body>
</html>
Output:
HTML Ordered List
In an ordered list, all list items are marked with numbers by default. An ordered list starts with the <ol> tag. Each list item starts with the “li” tag.
Syntax:
<ol>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>
Attributes:
- compact: It defines the list should be compacted (compact attribute is not supported in HTML5. Use CSS instead.).
- reversed: It defines that the order will be descending.
- start: It defines from which number or alphabet the order will start.
- type: It defines which type(1, A, a, I, and i) of the order you want in your list of numeric, alphabetic, or roman numbers.
Example: This example illustrates the use of the reverse attribute, control list counting & type attribute.
<!DOCTYPE html>
<html>
<head>
<title>HTML ol tag</title>
</head>
<body>
<h1 style="color: green">w3wiki</h1>
<h3>HTML ol tag</h3>
<p>reversed attribute</p>
<ol reversed>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<p>start attribute</p>
<ol start="5">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<p>type attribute</p>
<ol type="i">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
</body>
</html>
Output:
HTML Description List
A description list is a list of terms, with a description of each term. The <dl> tag defines the description list, the <dt> tag defines the term name, and the <dd> tag describes each term.
Syntax:
<dl> Contents... </dl>
Please refer to the How to add description list of an element using HTML? article for further details.
Example: This example describes the HTML Description List.
<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- 500 gms</dd>
<dt>Milk</dt>
<dd>- 1 ltr Tetra Pack</dd>
</dl>
</body>
</html>
Output:
Conclusion
HTML lists provide a way to display a structured collection of items. In this tutorial, we have explained three types of lists- ordered lists, unordered lists, and definition list. We have explained all three list types with examples.
We also covered various list tags in HTML, and how to change list item markers for both ordered and unordered lists. Creating nested lists provides more depth to the structure and we create them by using a list declaration tag (<ol>,<ul>) inside <li> tag, allowing us to create new lists within the list.