
DESCRIPTION
HTML Lists are used to specify lists of information. All lists may contain one or more list elements. There are three different types of HTML lists:
- Unordered List or Bulleted List (ul)
- Ordered List or Numbered List (ol)
- Description List or Definition List (dl)
Note: We can create a list inside another list, which will be termed as nested List.
Unordered or Bulleted list <ul>
In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list also. The Unordered list starts with <ul> tag and list items start with the <li> tag.
Example –
<!DOCTYPE html> <html> <head> <title>HTML Unordered List</title> </head> <body> <ul> <li>Inception</li> <li>Interstellar</li> <li>Tenet</li> <li>Predestination</li> </ul> </body> </html>
This Code will produce the following result on your webpage –
- Inception
- Interstellar
- Tenet
- Predestination
The Type Attribute
We can use type attribute for <ul> tag to see the particular type of bullet in our list. By default, it is a disc. There are 3 possible options to choose from –
<ul type = "disc"> - It shows circular disc as bullets. <ul type = "square"> - It shows square as bullets. <ul type = "circle"> - It shows circle (hollow disc) as bullets.
Ordered or Numbered list <ol>
In the HTML ordered lists, all the list items are marked with numbers by default. It is known as numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag.
Example –
<!DOCTYPE html> <html> <head> <title>HTML Ordered List</title> </head> <body> <ol> <li>Inception</li> <li>Interstellar</li> <li>Tenet</li> <li>Predestination</li> </ol> </body> </html>
This Code will produce the following result on your webpage –
- Inception
- Interstellar
- Tenet
- Predestination
The Type Attribute
We can use type attribute for <ol> tag to see the particular type of numbering in our list. By default, it is a number. There are 5 possible options to choose from –
<ol type = "1"> - Default-Case Numerals. <ol type = "I"> - Upper-Case Numerals. <ol type = "i"> - Lower-Case Numerals. <ol type = "A"> - Upper-Case Letters. <ol type = "a"> - Lower-Case Letters.
Description or Definition list <dl>
HTML Description list is also a list style which is supported by HTML . It is also known as definition list where entries are listed like a dictionary or encyclopedia. The definition list is very appropriate when you want to present glossary, list of terms or other name-value list.
Definition List makes use of following three tags –
- <dl> − Defines the start of the list
- <dt> − A term
- <dd> − Term definition
Example –
<!DOCTYPE html> <html> <head> <title>HTML Definition List</title> </head> <body> <dl> <dt><b>HTML</b></dt> <dd>This stands for Hyper Text Markup Language</dd> <dt><b>HTTP</b></dt> <dd>This stands for Hyper Text Transfer Protocol</dd> </dl> </body> </html>
This Code will produce the following result on your webpage –

Next topic – Forms in HTML
Previous topic – Tables in HTML
🥂🙏