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
🥂🙏