Scribd
Upload
1K views6 pages

Ordered and Unordered List

The document explains different types of HTML lists including unordered lists, ordered lists, description lists, and nested lists. It provides the syntax and examples of each list type.

Uploaded by

rkai
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
1K views6 pages

Ordered and Unordered List

The document explains different types of HTML lists including unordered lists, ordered lists, description lists, and nested lists. It provides the syntax and examples of each list type.

Uploaded by

rkai
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/ 6

HTML Lists: Ordered and Unordered Lists Explained with

Examples

✓ What is an HTML List?


HTML Lists help 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 Definition list (dl)

✓ 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


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

✓ 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


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

✓ 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 type attribute in the <ol> tag. Let’s explore how to order lists with alphabets and roman
numbers.

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

➢ Here is an example to show the use of Upper case le ers to list the items.
<!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:

✓ 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> (Definition list) tag – Start tag of the definition list
• <dt> (Definition Term) tag – It specifies a term (name)

tt

• <dd> tag (Definition Description) – Specifies the term definition


• </dl> tag (Definition list) – Closing tag of the definition list

➢ Example of HTML Description List

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

✓ 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


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

➢ Example of an HTML Nested Unordered List


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

You might also like