Scribd
Upload
39 views19 pages

HTML Lists

Uploaded by

kshitij_earth
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
39 views19 pages

HTML Lists

Uploaded by

kshitij_earth
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/ 19

HTML Lists: Ordered and Unordered Lists

Explained with Examples


Esha Gupta
Associat e Senior Execut ive
Updated on Oct 13, 2024 15:02 IST
Do you know what HTML Lists are? If not, don't worry because, in this blog,
we will be learning about HTML Lists, their types and more. Let's begin!

A list refers to any information displayed in a logical or linear form. It is a series of


items written together in a meaningful group or sequence and marked by bullet
points, numbers, etc. In HTML, there are three list types, each with a specific
purpose and tag. In this guide, we will lean what is list in HTML. We will
understand different HTML list tags and how to create HTML lists.

Must Check: How to Create Table in HTML

Table of Content
What is an HTML List?

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 14-Oct-20 24.
HTML Unordered List or Bulleted List

Ordered List or Numbered List

Dif f erent Types of Ordered Lists in HTML


HTML Description List or Def inition List
HTML Nested Lists

What is an HTML List?


List in HTML helps to display a list of information semantically.

There are three types of lists in HTML

Unordered list or Bulleted list (ul)


Ordered list or Numbered list (ol)
Description list or Def inition list (dl)

Explore Popular HTML Courses

HTML Unordered List or Bulleted List


In HTML unordered list, the list items have no specific order or sequence. An
unordered list is also called a Bulleted list, as the items are marked with bullets. It
begins with the <ul> tag and and closes with a </ul> tag. The list items begin with the
<li> tag and end with </li> tag.

Syntax

<ul>List of Items</ul>

Example of HTML Unordered List

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 14-Oct-20 24.
Copy code

<!DOCTYPE html>
< html>
< head>
< title> HTML Unordered List< /title>
< /head>
< body>
< h2> List of Fruits< /h2>
< ul>
< li> Apple< /li>
< li> Mango< /li>
< li> Banana< /li>
< li> Grapes< /li>
< li> Orange< /li>
< /ul>
< /body>
< /html>

Output

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 14-Oct-20 24.
Ordered List or Numbered List (ol)
In HTML, all the list items in an ordered list are marked with numbers by default
instead of bullets. An HTML ordered list starts with the <ol> tag and ends with the
</ol> tag. The list items start with the <li> tag and end with </li> tag.

Syntax
<ol>List of Items</ol>

Example of HTML Ordered List

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 14-Oct-20 24.
Copy code

<!DOCTYPE html>
< html>
< head>
< title> HTML Ordered List< /title>
< /head>
< body>
< h2> List of Fruits< /h2>
< ol>
< li> Apple< /li>
< li> Mango< /li>
< li> Banana< /li>
< li> Grapes< /li>
< li> Orange< /li>
< /ol>
< /body>
< /html>

Output

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 14-Oct-20 24.
Different Types of Ordered Lists in HTML
Instead of numbers, you can mark your list items with the alphabet: A, B, C or a,b,c,
or roman numerals: i, ii, iii, etc. You can do this by using the <ol> tag type attribute.
Let’s explore how to order lists with alphabets and roman numbers.

To mark the list items with letters A, B, C, etc., you must specify A as the type
attribute’s value in the <ol> tag.

Here is an example to show the use of Upper case letters to list the
items.

Copy code

<!DOCTYPE html>
< html>
< head>
< title> HTML Ordered List< /title>
< /head>
< body>
< h2> List of Fruits< /h2>
< ol type="A">
< li> Apple< /li>
< li> Mango< /li>
< li> Banana< /li>
< /ol>
< /body>
< /html>

Output

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 14-Oct-20 24.
Here is an example to show the use of Lower case letters to list the
items.

Copy code

<!DOCTYPE html>
< html>
< head>
< title> HTML Ordered List< /title>
< /head>
< body>
< h2> List of Fruits< /h2>
< ol type="a">
< li> Apple< /li>
< li> Mango< /li>
< li> Banana< /li>
< /ol>
< /body>
< /html>

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 14-Oct-20 24.
Output

Here is an example to show the use of Roman numerals to list the


items.

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 14-Oct-20 24.
Copy code

<!DOCTYPE html>
< html>
< head>
< title> HTML Ordered List< /title>
< /head>
< body>
< h2> List of Fruits< /h2>
< ol type="i">
< li> Apple< /li>
< li> Mango< /li>
< li> Banana< /li>
< /ol>
< /body>
< /html>

Output

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 14-Oct-20 24.
HTML Description List or Definition List
In an HTML Description list or Definition List, the list items are listed like a dictionary
or encyclopedia. Each item in the description list has a description. You can use a
description list to display items like a glossary. You will need the following HTML
tags to create a description list:

<dl> (Def inition list) tag – Start tag of the def inition list

<dt> (Def inition Term) tag – It specif ies a term (name)


<dd> tag (Def inition Description) – Specif ies the term def inition

</dl> tag (Def inition list) – Closing tag of the def inition list

Example of HTML Description List

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 14-Oct-20 24.
Copy code

<!DOCTYPE html>
< html>
< head>
< title> HTML Description List< /title>
< /head>
< body>
< dl>
< dt> < b> Apple< /b> < /dt>
< dd> A red colored fruit< /dd>
< dt> < b> Honda< /b> < /dt>
< dd> A brand of a car< /dd>
< dt> < b> Spinach< /b> < /dt>
< dd> A green leafy vegetable< /dd>
< /dl>
< /body>
< /html>

Output

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 14-Oct-20 24.
HTML Underline Tag – Underst and u Tag wit h Examples
This blo g explains the u tag to underline text in HTML. Yo u will also understand
when to use the underline tag. This blo g explains the u tag to underline
text...re ad m o re

Learn How t o Writ e HTML Comment s


Have yo u ever wo ndered ho w develo pers leave no tes o r disable parts o f HTML
co de witho ut affecting the webpage? This is do ne using HTML co mments. Let
us understand mo re! Learn what...re ad m o re

HTML Heading and Paragraph Tags Explained Wit h…


Examples
This tuto rial explains ho w to create headings and paragraphs in HTML
do cuments using heading and paragraph tags.

HTML Nested Lists


An HTML Nested list refers to a list within another list. We can create a nested
ordered list, a nested unordered list, or a nested ordered list inside an unordered list.

Let us explore some examples of HTML lists within lists:

Example of an HTML Nested Ordered List

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 14-Oct-20 24.
Copy code

<!DOCTYPE html>
< html>
< head>
< title> HTML Nested Ordered List< /title>
< /head>
< body>
< ol>
< li> Banana< /li>
< li> Apple
< ol>
< li> Green Apple< /li>
< li> Red Apple< /li>
< /ol>
< /li>
< li> Pineapple< /li>
< li> Orange< /li>
< /ol>
< /body>
< /html>

Output

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 14-Oct-20 24.
Example of an HTML Nested Unordered List

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 14-Oct-20 24.
Copy code

<!DOCTYPE html>
< html>
< head>
< title> HTML Nested Unordered List< /title>
< /head>
< body>
< ul>
< li> Fruits< /li>
< ul>
< li> Apple< /li>
< li> Banana< /li>
< li> Mango< /li>
< li> Orange< /li>
< /ul>
< li> Vegetables< /li>
< ul>
< li> Spinach< /li>
< li> Cauliflower< /li>
< li> Beetroot< /li>
< /ul>
< li> Cereals< /li>
< li> Nuts< /li>
< /ul>
< /body>
< /html>

Output

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 14-Oct-20 24.
Check out- Top 62 HTML Interview Questions and Answers for 2023
Explore the world of HTML/CSS with online courses from leading colleges.
Enroll now to advance your career in web development.
Thus, we hope this tutorial gave you an understanding of What is List in HTML and
how to add them to your web pages. To learn more about adding Forms in HTML,
check our HTML Forms article.

Concept of HTML Colors


HTML Co lo rs play a pivo tal ro le in creating the visual identity o f a webpage,
influencing its aesthetics, readability, user experience, and even its brand
messaging. HTML co lo rs are a way...re ad m o re

Mast ering But t on Tag in HTML


Have yo u ever wo ndered ho w interactive butto ns o n websites are created?
They're o ften made using the HTML tag, which allo ws develo pers to add
clickable elements fo r vario us actio ns like...re ad m o re

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 14-Oct-20 24.
Learning f ont Tag in HTML
Have yo u ever wo ndered ho w web pages were styled befo re the widespread
ado ptio n o f CSS? The tag in HTML was a key to o l fo r this purpo se. Used
primarily in...re ad m o re

Learning body Tag in HTML


Do yo u kno w that the tag in HTML is where all the magic o f a webpage
happens? It's the co ntainer that ho lds everything yo u see o n a web page,
including...re ad m o re

Learning div Tag in HTML


Have yo u ever wo ndered what keeps web pages o rganized and styled
co nsistently? The HTML tag plays a crucial ro le in this. It's a versatile, blo ck-
level element used primarily as...re ad m o re

Underst anding SVG Tag in HTML


Do yo u kno w the secret to crisp and scalable web graphics? It lies in the SVG
tag in HTML! This po werful to o l allo ws fo r the creatio n o f vecto r-based graphics,
ensuring...re ad m o re

All About marquee Tag in HTML


Have yo u ever wo ndered ho w early websites created mo ving text o r images?
The tag in HTML was o nce a po pular cho ice fo r this, allo wing text and images to
scro ll acro ss...re ad m o re

Learning ul Tag in HTML


Have yo u ever wo ndered ho w to o rganize items o n a webpage witho ut any
specific o rder neatly? The HTML tag is the so lutio n, designed to create
uno rdered lists with bullet...re ad m o re

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 14-Oct-20 24.
Span Tag in HTML
Have yo u ever wo ndered ho w web develo pers style o r manipulate specific parts
o f a webpage's text witho ut affecting the who le do cument? This is where the tag
in HTML co mes into ...re ad m o re

How t o Link CSS t o HTML


Have yo u ever wo ndered ho w to make yo ur website visually appealing and well-
structured? Linking CSS to HTML is the key to achieving this. Let’s understand
mo re! Learning ho w to Link...re ad m o re

All About br Tag in HTML


Have yo u ever wo ndered ho w to create a simple line break in yo ur HTML
co ntent? The tag is yo ur so lutio n. It's a self-clo sing element used to insert line
breaks,...re ad m o re

Underst anding ol Tag in HTML


Have yo u ever wo ndered ho w to present steps o r rank items o n a webpage
clearly? The tag in HTML is yo ur so lutio n. It creates an o rdered list where
each...re ad m o re

A Guide t o Semant ic Tags in HTML


Have yo u ever heard abo ut semantic tags in HTML? These tags give meaning to
yo ur web co ntent, making it mo re accessible and understandable bo th to users
and search engines. They...re ad m o re

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 14-Oct-20 24.
Dif f erence Bet ween div and span Tag in HTML
Have yo u ever wo ndered abo ut the difference between and in HTML? While is a
blo ck-level element creating a new line and used fo r structuring larger sectio ns,
...re ad m o re

FAQs

What is the use of HTML lists?

How to create a simple list in HTML?

How to create an HTML list with items numbered 1, 2, 3, 4...?

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 14-Oct-20 24.

You might also like