HTML Lists
An HTML List allows you to organize data on web pages into an ordered or unordered format to make the information easier to read and visually appealing. HTML Lists are very helpful for creating structured, accessible content in web development.
Types of HTML Lists
There are three main types of lists in HTML:
- Unordered Lists (<ul>): These lists are used for items that do not need to be in any specific order. The list items are typically marked with bullets.
- Ordered Lists (<ol>): These lists are used when the order of the items is important. Each item in an ordered list is typically marked with numbers or letters.
- Description Lists (<dl>): These lists are used to contain terms and their corresponding descriptions. Basic Example of HTML Lists
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>HTML</title>
</head>
<body>
<h2>Welcome To 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>
HTML List Tags
|
|
|
|
Tag |
|
|
|
|
|
|
|
|
<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. |
- Using HTML Unordered List or Bulleted List
Unordered lists are ideal for scenarios where the sequence of the items is not important.
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>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li> </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>
- Using HTML Ordered List
Ordered lists are used when the items need to follow a specific sequence.
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 describes the ordered list with the use of reverse, type, and start attribute.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>HTML</title>
</head>
<body>
<h1 style=”color: green”>SunitaRai</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>
- Using HTML Description List
A description list is a list of terms, with a description of each term. Description lists are less common but very useful for definitions, glossaries, or any other key-value pairs of items.
The <dl> tag defines the description list, the <dt> tag defines the term name, and the <dd> tag describes each term.
Syntax:
<dl>
<dt>Item 1</dt>
<dd>Description of Item 1 </dd>
<dt>Item 2</dt>
<dd>Description of Item 2</dd>
</dl>
Here, <dt> (description term) is used for the term being defined, and <dd> (description details) is used for the description.
Example:
This example describes the HTML Description List.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>HTML</title>
</head>
<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>
HTML Ordered Lists
An HTML Ordered List is created using the <ol> tag to display items in a specific sequence, typically numbered or alphabetically ordered. Each list item is defined using the <li> (list item) tag. Ordered lists are widely used for instructions, rankings, and step-by-step guides— appearing in over 60% of structured web content that requires clear, sequential formatting.
This is how the HTML Ordered list will be displayed in a browser:
- Item a
- Item b
- Item c
The list is automatically numbered by the browser, but the style of numbering can be adjusted using attributes and CSS.
Syntax:
<ol>
<li>Milks</li> <li>Eggs</li>
<li>Breads</li>
<li>Butter</li> </ol>
Basic Ordered List
<!DOCTYPE html>
<html>
<head>
<title>Simple Ordered List</title>
</head>
<body>
<h2>My To-Do List</h2>
<ol>
<li>Go grocery shopping</li>
<li>Pay utility bills</li>
<li>Prepare dinner</li>
</ol>
</body>
</html>
Different Type Attributes in HTML Ordered List
The type attribute of <ol> tag specifies the order we want to create.
HTML Unordered Lists
An unordered list in HTML is used to group a set of list items that don’t need to be in a specific order. The items in an unordered list are usually displayed with bullet points by default. Here are the some key features of HTML unordered lists:
- No Order: Lists items without a specific sequence.
- Customizable Bullets: Bullets can be changed with CSS.
- Nesting: Allows lists within lists.
- Simple Syntax: Created with <ul> and <li>.
Syntax
<ul>
<li>Item 1</li>
<li>Item 2</li> </ul>
In the above syntax
- <ul>: This tag defines the unordered list. It tells the browser that the following items are part of a list where the order does not matter.
- <li>: This tag defines each list item. Each <li> represents an individual item in the list.
Now let’s understand this with the help of example:
<html>
<head>
<title>
HTML Unordered Lists
</title>
</head>
<body>
<h2>HTML Unordered Lists</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>React</li>
</ul>
</body>
</html>
Unordered Lists Style Types
In HTML, unordered lists (<ul>) are used to display items without any specific order, and by default, they show bullet points. However, the appearance of these bullets can be changed using CSS with different styles.
Here are some common list-style-type values that you can apply to unordered lists to change the bullet style.
- Square Bullet Style
To change the bullets in an unordered list to squares, the list-style-type property in CSS can be set to square. Let’s understand this with the help of example
<html>
<head>
<title>
Square type unordered list
</title>
</head>
<body>
<h2>Square type unordered list</h2>
<ul style=”list-style-type: square”>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>React</li>
</ul>
</body>
</html>
- Circle Bullet Style
To change the bullets in an unordered list to circles, the list-style-type property in CSS can be set to circle. Let’s understand this with the help of example
<html>
<head>
<title>
Circle type unordered list
</title>
</head>
<body>
<h2> Circle type unordered list</h2>
<ul style=”list-style-type:circle;”>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>React</li>
</ul>
</body>
</html>
- Removing Bullets
To remove the default bullets in an unordered list, the list-style-type property in CSS can be set to none. Let’s understand this with the help of example
<html>
<head>
<title>
None type unordered list
</title>
</head>
<body>
<h2>None type unordered list</h2>
<ul style=”list-style-type:none;”>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>React</li>
</ul>
</body>
</html>
Nested Unordered List
A nested unordered list is simply an unordered list (<ul>) inside another list item (<li>) of an existing unordered list. This is useful for representing hierarchical or grouped information, like categories and subcategories. Let’s understand this with the help of example.
<html>
<head>
<title>Nested unordered list</title>
</head>
<body>
<h2>Nested unordered list</h2>
<ul>
<li>SunitaRai</li>
<li>
Web Development
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
<li>Javascript</li>
</ul>
<ul type=”square”>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</body>
</html>
Horizontal Unordered List
The unordered list may need to be displayed horizontally, such as in a navigation menu. This can be accomplished with the help of CSS. Let’s understand this with the help of example . Let’s understand this with the help of example:
<html>
<head>
<title>HTML Horizontal Unordered List</title>
<style> body { text-align: center;
} ul {
overflow: hidden; background-color: #1d6b0d;
list-style-type: none;
} li { float: left;
}
li a {
text-decoration: none; color: white; padding: 0.5rem;
}
</style>
</head>
<body>
<h3>HTML Horizontal Unordered List</h3>
<ul>
<li><a href=”#course”>Course</a></li>
<li><a href=”#Blog”>Blogs</a></li>
<li>
<a href=”#Content”>Content</a>
</li>
</ul>
</body>
</html>
Using Unordered Lists for Navigation
Unordered lists are often used for creating navigation menus on websites. They are great for displaying a list of links where the order of the items doesn’t matter. Let’s understand this with the help of example.
<html>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Navigation Menu</title>
<style>
ul {
list-style-type: none; padding: 0;
} li {
display: inline;
margin-right: 20px;
}
</style>
</head>
<body>
<h1>Website Navigation</h1>
<ul>
<li><a href=”#home”>Home</a></li>
<li><a href=”#about”>About</a></li>
<li><a href=”#services”>Services</a></li>
<li><a href=”#contact”>Contact</a></li>
</ul>
</body>
</html>
HTML Description Lists
An HTML Description List is not as commonly used as unordered or ordered lists but serves an important purpose for displaying name-value pairs. This type of list is marked up using three tags: <dl>, <dt>, and <dd>.
- <dl> (Description List): This tag defines the description list itself and acts as a container for the list items.
- <dt> (Description Term): Represents a term or a name within the list.
- <dd> (Description Details): Provides the description or definition of the term.
HTML Description Lists Examples
<!DOCTYPE html>
<html>
<head>
<title>Description Lists Example</title>
</head>
<body>
<h2>HTML Description Lists</h2>
<dl>
<dt>HTML</dt>
<dd>
HyperText Markup Language
</dd>
<dt>CSS</dt>
<dd>
Cascading Style Sheets
</dd>
<dt>JavaScript</dt>
<dd>
Scripting language for Web pages
</dd>
</dl>
</body>
</html>
Nested Description List
A nested description list is when we add a description list inside another description list. This allows for organizing related terms and their definitions in a hierarchical structure, as demonstrated in the example:
<!DOCTYPE html>
<html>
<head>
<title>Nested Description List</title>
</head>
<body>
<h3>Technology Overview</h3>
<dl>
<dt>Hardware</dt>
<dd>Physical devices</dd>
<dd>
<dl> <!– Nested Description List for Hardware Types –>
<dt>CPUs</dt>
<dd>Processors</dd>
<dt>GPUs</dt>
<dd>Graphics</dd>
</dl>
</dd>
<dt>Software</dt>
<dd>Programs/Apps</dd>
<dd>
<dl> <!– Nested Description List for Software Types –>
<dt>System</dt>
<dd>OS</dd>
<dt>Application</dt>
<dd>Tools</dd>
</dl>
</dd>
</dl>