Scribd
Upload
3 views

HTML - Lists

The document provides an overview of HTML lists, including unordered, ordered, and definition lists, along with examples of each type. It also discusses nested lists, grouping lists within <div> tags, and styling lists using CSS. Additionally, it explains how to customize list markers with the CSS list-style-type property.

Uploaded by

kirutadie
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

HTML - Lists

The document provides an overview of HTML lists, including unordered, ordered, and definition lists, along with examples of each type. It also discusses nested lists, grouping lists within <div> tags, and styling lists using CSS. Additionally, it explains how to customize list markers with the CSS list-style-type property.

Uploaded by

kirutadie
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Page 1 of 7

HTML - Lists
HTML Lists
HTML lists are group or collection of items. These items can be both organized and
unorganized depending on the requirement. They help in organizing, structuring, and
presenting information to make it more user-friendly, readable, and accessible. Sample
lists are shown below. −

Using Lists in HTML


To display a list of information in HTML, we use various list tags like <ul>, <ol>, and
<ll>. HTML offers web developers three ways for specifying lists of information, namely
ordered, unordered, and definition lists. All lists must contain one or more list
elements. In addition to the mentioned types of lists, there are some other important
list-related elements and concepts that also contribute to effective document structuring.

Explore our latest online courses and learn new skills at your own pace. Enroll and
become a certified expert to boost your career.

Unordered lists
Unordered lists display lists of items that are not in a specific order. The unordered lists
are marked with bullet points. To create an unordered list, the <ul> tag is used along
with the <li> tag. Here, the <li> tag specifies the list items.

Example

The following example demonstrates an unordered listing. Here, we are creating a list of
5 items:

Open Compiler
Page 2 of 7

<!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>

Ordered Lists
Ordered lists are lists of items that are in a specific order. The ordered lists are marked
with numbers by default; you can change the numbers into alphabets, roman numbers,
etc. by using the type attribute or the CSS list-style-type property.

To create an ordered list, the <ol> tag is used along with the <li> tag, where <li>
specifies the list items.

Example
The following example demonstrates an ordered list having the list of 5 items:

Open Compiler

<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
</head>
<body>
<h2>Example of HTML List</h2>
<ol>
<li>HTML</li>
Page 3 of 7

<li>CSS</li>
<li>JavaScript</li>
<li>Java</li>
<li>JavaFX</li>
</ol>
</body>
</html>

Definition Lists
Definition lists are lists of items with their corresponding descriptions. The definition lists
are created by using the <dl>, <dt>, and <dd> tags. Where the <dl> tag specifies the
"definition list", the <dt> tag specifies the "definition term", and the <dd> tag
specifies the "definition description".

Example
The following example demonstrates the definition list in HTML; here we are creating a
definition list with three items:

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>
Page 4 of 7

Nested Lists
A list created within another list is known as a nested list. HTML also allows nesting of
lists within one another to generate 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>

Grouping Lists Inside <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 a div tag:

Open Compiler
Page 5 of 7

<!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>

Styling Lists
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 demonstrates how to apply CSS to the HTML list using a style
tag:

Open Compiler

<!DOCTYPE html>
<html>
<head>
Page 6 of 7

<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 Lists Marker Types


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
Page 7 of 7

<!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>

You might also like