HTML Lists
There are three main types of lists in HTML:
- Unordered Lists
- Ordered Lists
- Nested Lists 4. Definition List
5. Reversed Ordered Lists
6. Start Attribute in Ordered Lists
1. Unordered List (<ul>)
An unordered list presents items in bullet points. The list items are defined using the <li> tag.
Example:
This will render:
- Item 1
- Item 2
- Item 3
2. Ordered List (<ol>)
An ordered list displays items in a sequential order, with numbers or letters.
Example:
This will render:
- Step 1
- Step 2
- Step 3
You can change the numbering style using the type attribute.
Example of Different Numbering Styles:
This renders:
A. Item 1
B. Item 2
C. Item 3
Other values for type:
type="1": Default (numeric).type="A": Uppercase letters.type="a": Lowercase letters.type="I": Uppercase Roman numerals.type="i": Lowercase Roman numerals.
3. Nested Lists
You can nest lists by placing one list inside another list item.
Example:
This will render:
- Fruits
- Apple
- Banana
- Vegetables
- Carrot
- Broccoli
4. Definition List (<dl>)
A definition list is used for listing terms and their definitions. The <dl> tag wraps the list, <dt> is used for the term, and <dd> is used for the description.
Example:
This will render:
- HTML: Hypertext Markup Language
- CSS: Cascading Style Sheets
5. Customizing List Style Using CSS
You can style lists using CSS to change bullet points, spacing, and more.
Example: Custom Bullet Style
This will display square bullets instead of the default round ones.
list-style-typecan bedisc(default),circle,square,none(no bullets).
Example: Image as a Bullet
This replaces the bullet points with a custom image.
6. Reversed Ordered Lists
You can reverse the numbering in an ordered list using the reversed attribute.
Example:
This will render:
3. Step 3
2. Step 2
- Step 1
7. Start Attribute in Ordered Lists
The start attribute allows you to define the starting number of an ordered list.
Example:
This will render:
5. Item 1
6. Item 2
Summary of List Tags:
<ul>: Unordered list (bulleted).<ol>: Ordered list (numbered).<li>: List item.<dl>: Definition list.<dt>: Definition term.<dd>: Definition description.
These examples cover the basics and customization options for HTML lists, helping you structure content effectively!
Example: Basic example of HTML List
<!DOCTYPE html>
<html>
<head>
<title>GeeksforGeeks</title>
</head>
<body>
<h2>Welcome To GeeksforGeeks 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:
HTML List
HTML List Tags
Here is the list of all lists tags HTML:
| Tag | Description |
|---|---|
| <ul> | Defines an unordered list |
| <ol> | Defines an ordered list |
| <li> | Defines a list item |
| <dl> | Defines a description list |
| <dt> | Defines a term in a description list |
| <dd> | Details the term in a description list |
1. HTML Unordered List or Bulleted List
The unordered list items are marked with bullets, also known as bulleted lists. An unordered list starts with the <ul> tag, and each list item begins with the <li> tag.
Syntax:
<ul> list of items </ul>Attribute: This tag contains two attributes which are listed below:
- compact: It will render the list smaller.
- type: It specifies which kind of marker is used in the list.
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:
Unordered List
2. HTML Ordered List
In an ordered list, all list items are marked with numbers by default. An ordered list starts with the <ol> tag, and each list item begins with the <li> tag.
<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">GeeksforGeeks</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:
Ordered List with different list style
3. 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:
Description List
