Table of contents
As a code newbie, you might have come across list tags in HTML. This article discusses in detail everything you need to know about list tags .
What are HTML Lists?
HTML lists are used to group a set of related items in a well defined manner on a web document. This is achieved using the list element. The 3 types of list elements used in HTML 5 are:
• Unordered list element
• Ordered list element
• Definition list element
Unordered List Element <ul>
Unordered list element is used to create a list with items in no specific order or sequence. It is defined using the <ul> tag </ul>.
Each item to be listed is enclosed in an <li> tag.
Example
<!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>Document</title>
</head>
<body>
<h4>Shopping List</h4>
<ul>
<li>Sugar</li>
<li>Salt</li>
<li>Pepper</li>
<li>Butter</li>
<li>Milk</li>
</ul>
</body>
</html>
Result:
- Sugar
- Salt
- Pepper
- Butter
- Milk
The Unordered List type Attribute
By default the browser assigns a disc bullet type to each listed item. But that can be changed by using the type attribute on the <ul> tag which will change the entire bullet type of the list.
Unordered list type include:
• disc
• circle
• square.
Example
<body>
<ul type="square">
<li>Salt</li>
<li>Pepper</li>
<li>Butter</li>
<li>Milk</li>
<li>Sugar</li>
</ul>
</body>
You can also set the bullet type for an item in the list by adding the type attributes in the <li> tag.
Example
<body>
<ul>
<li type="square">Salt</li>
<li type="disc">Pepper</li>
<li type="circle">Butter</li>
</ul>
</body>
Output
Ordered List Element <ol>
An Ordered list element is used to create a list whose items are arranged in an indexed, alphabetical or numerical order.
It is defined using the <ol> tag.
The ordered list items each written inside an <li> tag is written in between the opening and closing tag of the <ol> tag.
Example
< body >
<ol>
<li>Pen</li>
<li>Paper</li>
<li>Bag</li>
<li>Envelope</li>
<li>Stamp</li>
</ol>
</body>
Result:
- Pen
- Paper
- Bag
- Envelope
- Stamp
The Ordered List type Attribute
By default the browser automatically assigns a number to the listed items starting from 1. But this can be changed by using the type attribute on the <ol> tag.
Some ordered list type supported in HTML 5 are;
- A (uppercase alphabets)
- a (lowercase alphabets)
- I (uppercase Roman numerals)
- i (lowercase Roman numerals)
- 1 (numbers)
Example
<body>
<ol type="A">
<li>Pen</li>
<li>Paper</li>
<li>Bag</li>
<li>Envelope</li>
<li>Stamp</li>
</ol>
</body>
Practice: Try the different other list types on your text editor.
The Start Attribute:
Another attribute used with the
- element is the start attribute. This attribute is used to set the starting number or letter of a list, especially if you decide that the list shouldn't start from 1, I or A.
Note: The value of this attribute is always an integer, even when the numbering type is letters or roman numeral. To illustrate: To start counting list items from the letter "d" or the roman numeral "iv", use start="4".
Example
<body>
<ol type="i" start="4">
<li>Pen</li>
<li>Paper</li>
<li>Bag</li>
<li>Envelope</li>
<li>Stamp</li>
</ol>
</body>
Output
Description List Elements <dl>
A Description list element is used to define or describe terms. It represents lists following dictionary or encyclopedia pattern. A description list consists of a term, and a definition of that term.
Every description list starts with the dl> tag followed by the <dt> term to be defined</dt> tag, <dd> definition of term </dd> and ends with a closing </dl> tag.
Example
< body >
<dl>
<dt>Computer</dt>
<dd> - Computer is an electronic device that accepts data as input, processes the data, stores it and sends out information as output.</dd>
</dl>
</body>
Nested List Elements:
Just like nested other nested elements, a list element can contain another list element which could be ordered, unordered or definition lists.
Example
<body>
<ol>
<li>Paper</li>
<li>Pen
<ul>
<li>blue pen</li>
<li>green pen</li>
</ul>
</li>
<li>Bag
<ul>
<li>black </li>
<li>brown</li>
</ul>
</li>
</ol>
</body>
Output:
Practice: Make more nested lists on your text editor.
In Conclusion:
There is a popular saying: "Practice makes perfect". Just keep on practicing and experimenting with the different tags. Leave a reaction and drop a comment about the next topic you would love me to write on in this series.