What is difference between ordered and unordered list?

HTML Lists

In this tutorial you will learn how to create different types of lists in HTML.

Table of Contents Show

Unordered Lists
Ordered Lists
Unordered, Ordered, and Description Lists in HTML
List Item tag
Ordered list
Unordered list:
Description list
Ordered, Unordered & Description Lists in HTML: Definition & Examples
What is the difference between ordered and unordered?
Table of Contents
What is the difference between ordered and unordered?
What is an ordered and unordered list?
What is difference between ordered list and unordered list with example?
What is the difference between ordered and unordered list HTML?
What is the other name of ordered list?
What is ordered list with example?
What is called ordered list?
What is another name for unordered list?
What are the different types of unordered list?
How are ordered and unordered lists used in HTML?
Which is the correct order ordered or unordered?
What's the difference between an UL and an unordered list?
Which is an example of an ordered list?
Did Sarah Grimke get married?
What stops leg cramps immediately?
How can I get a bigger tax refund?
What is the absolute value of 4 and negative 4?

Unordered Lists

Making your own unordered list is straightforward. You just wrap an unordered list tag, or ul tag, around your list items, which use li tags. This will create a list of related items without being in a particular order.

<!DOCTYPE html> <html> <head> <title>Unordered List</title> </head> <body> <h2>Things that are cool:</h2> <ul> <li>Memes</li> <li>Food</li> <li>Coding</li> </ul> </body> </html>

How an unordered list looks like.

Ordered Lists

To turn our unordered list into an ordered one requires just changing the wrapper tag from ul (for unordered list) to an ol tag (ordered list). This will create an ordered list of related items.

<!DOCTYPE html> <html> <head> <title>Ordered List</title> </head> <body> <h2>How to become a great developer:</h2> <ol> <li>Read all the content on Sabe</li> <li>Practice, practice, practice.</li> <li>Stay curious. Ask questions. Never stop learning.</li> </ol> </body> </html>

How an ordered list looks like.

Unordered, Ordered, and Description Lists in HTML

Lists are used to store data or information in web pages in ordered or unordered form. HTML supports several types of list elements that can be included in the <BODY>tag of the document. These elements may also be nested, i.e, the onset of elements can be embedded within another. There are three types of list are available in HTML:

Unordered List
Ordered List
Description list

Now before moving to the list first of all we understands what is a list item tag.

List Item tag

List item tag is used to define each item of a list. Once we define list items with the <li> tag, the list appears in Web browsers in the bulleted form (by default). It is used inside both ordered and unordered list.

Syntax:

<li> content </li>

Attribute of item tag:

value: The value attribute of the<li> tag is used to specify the value of the first item. The value must be a number and this can be used in case of ordered list only. The subsequent list items will increment the value form the number.

Syntax:

<li value = number>

Example 1:

HTML

<html >

<head>

<title>inline style attribute</title>

</head>

<body>

<li>sachin</li>

<li>sujay</li>

<li>Amraditya</li>

<li>shivam</li>

<li>Parth</li>

</body>

</html>

Output:

Example 2:

HTML

<html >

<head>

<title>inline style attribute</title>

</head>

<body>

<ol>

<li value="51">English</li>

<li>Hindi</li>

<li>Maths</li>

<li>Science</li>

<li>social science</li>

</ol>

</body>

</html>

Output:

Now we will discuss all the list provided by the HTML one-by-one in detail:

Ordered list

An ordered list defines a list of items in which the order of the items are matters. An ordered list is also called a number list. The ordering is given by a numbering scheme, using Arabic numbers, letters, roman numerals. Or in other words, ordered list tag is used to create ordered list.

Syntax:

<ol> content </ol>

Attributes of ordered list:

1. reversed: This attribute is used to specifies that the ordered of the list should be reversed.

Syntax:

<ol reversed>

2. start: This attribute is used to specifies the start value of the list.

Syntax:

<ol start = “number”>

3. type: This attribute is used to specifies the type of list item maker. The value of this attribute is decimal(Default)/lower-roman/upper roman/lower-alpha/upper alpha

Syntax:

<ol type = “1|b|A|i|I”>

Example 1:

HTML

<html>

<head>

<title>ordered list</title>

</head>

<body>

<h2>Example of ordered list in default</h2>

<ol >

<li>Sachin</li>

<li>Manoj</li>

<li>Parth</li>

<li>sujay</li>

<li>Amraditya</li>

</ol>

</body>

</html>

Output:

Example 2:

HTML

<html>

<head>

<title>ordered list</title>

</head>

<body>

<h2>Example of ordered list whose type = "A"</h2>

<ol type="A">

<li>Sachin</li>

<li>Manoj</li>

</ol>

<h2>Example of reverse ordered list</h2>

<ol reversed>

<li>Parth</li>

<li>sujay</li>

</ol>

<h2>Example of ordered list start from 10</h2>

<ol start = "10">

<li>Pushpa</li>

<li>Purvi</li>

</ol>

</body>

</html>

Output:

Unordered list:

An unordered list defines a list of items in which the order of the items does not. Or in other words, unordered list tag is used to create a unordered list. It is also known as bulleted list. In unordered list each element in the list is defined using <li> tag.

Syntax:

<ul> content </ul>

Attributes of unordered list:

List-style-type: This attribute is used to specifies the bullet style that will be used as the list item marker. The value of this attribute is None/disc(default)/circle/square.

Syntax:

<ul style=”list-style-type:square|disc|none;”>

Example 1:

HTML

<html>

<head>

<title>unordered list</title>

</head>

<body>

<h2>Example of unordered list in default</h2>

<ul>

<li>Sachin</li>

<li>Manoj</li>

<li>Parth</li>

<li>sujay</li>

<li>Amraditya</li>

</ul>

</body>

</html>

Output:

Example 2:

HTML

<html>

<head>

<title>unordered list</title>

</head>

<body>

<h2>Example of unordered list in circle</h2>

<ul style="list-style-type:circle;">

<li>sachin</li>

<li>manoj</li>

</ul>

<h2>Example of unordered list in disk</h2>

<ul style="list-style-type:disk;">

<li>Priya</li>

<li>Mohit</li>

</ul>

<h2>Example of unordered list in square</h2>

<ul style="list-style-type:square;">

<li>Pinky</li>

<li>Punam</li>

</ul>

<h2>Example of unordered list in none</h2>

<ul style="list-style-type:none;">

<li>Mukti</li>

<li>Dhama</li>

</ul>

</body>

</html>

Output:

Description list

Description list is a list in which each term contain its description. This tag contain <dt> and <dd> tag.

<dt></dt>: This tag is used to define the name or term
<dd><dd>: this tag is used to describe the term.

Syntax:

<dl> content </dl>

Example:

HTML

<html>

<head>

<title>Description list</title>

</head>

<body>

<h2>Example of description list</h2>

<dl>

<dt>Python:</dt>

<dd>It is a programming language</dd>

<dt>C++:</dt>

<dd>It is also a programming language</dd>

</dl>

</body>

</html>

Output:

Article Tags :

class 7

School Learning

School Programming

Read Full Article

Ordered, Unordered & Description Lists in HTML: Definition & Examples

Lesson Transcript

Instructor: Amit Agrawal Show bio

Amit has a master's degree in computer applications and over 11 years of industry experience in the IT software domain.

In this lesson, you will learn about three different types of lists in HTML: ordered, unordered and description. You will also learn about the different attributes that can be used with each of these lists to change their structure. Updated: 09/27/2021

Create an account

What is the difference between ordered and unordered?

What is the difference between ordered and unordered?
What is an ordered and unordered list?
What is difference between ordered list and unordered list with example?
What is the difference between ordered and unordered list HTML?
What is the other name of ordered list?
What is ordered list with example?
What is called ordered list?
What is another name for unordered list?
What are the different types of unordered list?
How are ordered and unordered lists used in HTML?
Which is the correct order ordered or unordered?
What's the difference between an UL and an unordered list?
Which is an example of an ordered list?

What is the difference between ordered and unordered?

Unordered list — Used to create a list of related items, in no particular order. Ordered list — Used to create a list of related items, in a specific order.

What is an ordered and unordered list?

HTML provides you with three types of lists: 1) ordered lists which have an inherent order and each item is numbered, 2) unordered lists which have no inherent order and each item is bulleted and 3) description lists which contain a list of terms and descriptions for each term.

What is difference between ordered list and unordered list with example?

Ans. In an unordered list, the list items are represented in the bulleted form. The

represented in the alphabetical, numerical, or roman numerical form

tag is used to create an ordered list.

What is the difference between ordered and unordered list HTML?

The main difference between an ordered list and an unordered list is that with an ordered list, the order in which items are presented is important. Because the order matters, instead of using a dot as the default list item marker, an ordered list uses numbers.

What is the other name of ordered list?

OL (Ordered List) An ordered list typically is a numbered list of items.

What is ordered list with example?

Answer: An ordered list typically is a numbered list of items. HTML 3.0 gives you the ability to control the sequence number - to continue where the previous list left off, or to start at a particular number. Example: An ordered list created using the

element

, and each list item starts with the

element.

What is called ordered list?

An ordered list typically is a numbered list of items. HTML 3.0 gives you the ability to control the sequence number - to continue where the previous list left off, or to start at a particular number.

What is another name for unordered list?

UL (Unordered List) An unordered list typically is a bulleted list of items.

What are the different types of unordered list?

UL - Unordered List

TYPE=[ disc | square | circle ] (bullet style)
COMPACT (compact display)
common attributes.

How are ordered and unordered lists used in HTML?

HTML lists are used to present list of information in well formed and semantic way. There are three different types of list in HTML and each one has a specific purpose and meaning: Unordered list — Used to group a set of related items, in no particular order. Ordered list — Used to group a set of related items, in a specific order.

Which is the correct order ordered or unordered?

If you don't then following example helps you to understand concept ordered vs unordered: Let's analyze this concept using ASCII letters as: If we look at the output for strings, lists and tuples, they are in same order as they are specified intially.

What's the difference between an UL and an unordered list?

Anunordered listis alistin which the order of thelistitems does not matter. ... The ul element opens and closes anunordered list. The items on thelistare contained between listitem, li , tags. A simpleunordered list containing three items could be created with the following HTML.

Which is an example of an ordered list?

For example, a recipe would likely use an ordered list because the steps occur in sequence. Any step-by-step process is best presented as an ordered list. Unordered Lists: These are sometimes called bulleted lists because the default visual appearance of an unordered list is to have small bullet icons in front of the list items.

⇐ What does The Lottery say about human nature?

How much shadowing do I need? ⇒