HTML - Lists
Ads by
File Uploads for this
Stop seeing
WordPress
ad
Ninja Forms Why this ad?
You can build beautiful WordPress forms
without being a developer or web designer
Ninja Forms
Learn More
HTML List is a collection of related infomation. The lists can be ordered or underdered depending on the
requirement. In html we can create both order and unorder lists by using <ol> and <ul> tags. Each type of
list can be decorated using porper attributes or CSS also. There is one more list which is description list -
HTML <dl>, <dt> & <dd> tag are used to create description lists.
Ads by
Stop seeing this ad
File Uploads for WordPress
Why this ad?
Ninja Forms
You can build beautiful WordPress forms
without being a developer or web
designer
Ninja Forms
Learn More
Lists in HTML
As HTML offers three ways for specifying lists of information namely ordered, unordered, and definition
lists. All lists must contain one or more list items.
Try to click the icon run button to run the following HTML code to see the output.
Examples of HTML Lists
In the below examples we will see unorder list, order list, description lists, and their variation as well, will
use CSS to decorate the list.
HTML Unorder Lists
Unorder lists are marked with bullet points, by using html <ul> & <li> tag we can create a unorder list. This
is also know as unorder list.
Example
In this example we will create 5 items in a unorder list.
Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
</head>
<body>
<h2>Example of HTML List</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Java</li>
<li>JavaFX</li>
</ul>
</body>
</html>
Example of HTML List
HTML
CSS
JavaScript
Java
JavaFX
HTML Order Lists
Order list are marked with numbers by default, we can xhnage the number into alphabet, roman numbers,
etc. By using html <ol> & <li> tag we can create a order list and using type attribute we can change the
default numeric marking.
Example
In this example we will create 5 items in a order list, try to use the type attribute to chnage numeric order
marking.
Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
</head>
<body>
<h2>Example of HTML List</h2>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Java</li>
<li>JavaFX</li>
</ol>
</body>
</html>
Example of HTML List
1. HTML
2. CSS
3. JavaScript
4. Java
5. JavaFX
HTML Description Lists
Description list is list of items with description, to create a desccription list we can use <dl>, <dt> & <dd>
tag.
Example
In this example we will create 3 description list with the descripion.
Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
</head>
<body>
<h2>Example of HTML List</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText markup languague</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheet</dd>
<dt>JS</dt>
<dd>JavaScript</dd>
</dl>
</body>
</html>
Example of HTML List
HTML
HyperText markup languague
CSS
Cascading Style Sheet
JS
JavaScript
Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified
expert to boost your career.
Anzeige
Best Liposuctions Surgeons in Turkey (See List)
Explore popular tummy tuck treatments and their
benefits.
Tummy Tuck LEARN MORE
HTML Nested Lists
A list created within another list is known as Nested List. HTML also allow nesting of lists within one
another to generate a complex document structures.
Example
In the following example, we are nesting an unordered list within an ordered list.
Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
</head>
<body>
<h2>Example of HTML Nested List</h2>
<ol>
<li>Item One</li>
<li>Item Two
<ul>
<li>Subitem A</li>
<li>Subitem B</li>
</ul>
</li>
<li>Item Three</li>
</ol>
</body>
</html>
Example of HTML Nested List
1. Item One
2. Item Two
Subitem A
Subitem B
3. Item Three
Anzeige
Best Liposuction Surgeons Turkey 2024
(See Prices)
Grouping with the <div> Tag
To enhance styling and layout, lists are often wrapped inside the <div> elements. This grouping aids in
applying consistent styles and creating visually appealing list structures.
Example
In this example, we are grouping unordered lists with div tag.
Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
</head>
<body>
<h2>Grouping of HTML List elements with div tag</h2>
<div>
<p>First List</p>
<ol>
<li>Item One</li>
<li>Item Two</li>
</ol>
</div>
<div>
<p>Second List</p>
<ol>
<li>Item Three</li>
<li>Item Four</li>
</ol>
</div>
</body>
</html>
Grouping of HTML List elements with div tag
First List
1. Item One
2. Item Two
Second List
1. Item Three
2. Item Four
Applying CSS to HTML List
Lists can be styled using CSS to enhance visual presentation. Custom styles can be applied to list items,
creating unique and visually appealing designs. For this, we use the <style> tag which is a way of
specifying internal CSS.
Example
The following example demonstrate how to apply CSS to the HTML list using style tag.
Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
<style>
li {
font-size: 16px;
}
div {
color: red;
}
</style>
</head>
<body>
<h2>HTML List with CSS</h2>
<div>
<p>First List</p>
<ol>
<li>Item One</li>
<li>Item Two</li>
</ol>
</div>
<div>
<p>Second List</p>
<ol>
<li>Item Three</li>
<li>Item Four</li>
</ol>
</div>
</body>
</html>
HTML List with CSS
First List
1. Item One
2. Item Two
Second List
1. Item Three
2. Item Four
Marker Types in HTML Lists
CSS allows customization of marker types for list items. To do so, we use the CSS list-style-type property
which can be set to change markers to circles, squares, or other symbols.
Example
In this example, we are using the list-style-type property of CSS to set the markers of list items.
Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
<style>
li {
font-size: 16px;
list-style-type: square;
}
</style>
</head>
<body>
<h2>HTML list-style-type Property</h2>
<div>
<p>First List</p>
<ol>
<li>Item One</li>
<li>Item Two</li>
</ol>
</div>
<div>
<p>Second List</p>
<ol>
<li>Item Three</li>
<li>Item Four</li>
</ol>
</div>
</body>
</html>
HTML list-style-type Property
First List
Item One
Item Two
Second List
Item Three
Item Four