Scribd
Upload
7 views

html list

The document provides a comprehensive overview of HTML lists, detailing three main types: ordered lists (<ol>), unordered lists (<ul>), and definition lists (<dl>). It includes syntax examples, types of numbering and bullet points, and explains how to create nested lists. Additionally, it features a Q&A section addressing common questions about the purpose and usage of these lists.

Uploaded by

sameermadabhavi232
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

html list

The document provides a comprehensive overview of HTML lists, detailing three main types: ordered lists (<ol>), unordered lists (<ul>), and definition lists (<dl>). It includes syntax examples, types of numbering and bullet points, and explains how to create nested lists. Additionally, it features a Q&A section addressing common questions about the purpose and usage of these lists.

Uploaded by

sameermadabhavi232
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

HTML Lists – Complete Notes

Introduction to Lists in HTML

A list is a collection of related items grouped together in HTML. Lists help organize content,
making it easy to read and understand. HTML provides three main types of lists:

1. Ordered List (<ol>) – Items are numbered.

2. Unordered List (<ul>) – Items have bullet points.

3. Definition List (<dl>) – Used for terms and descriptions.

1. Ordered List (<ol>)

An ordered list is used when the sequence of items is important. The list items (<li>) are
numbered automatically.

Syntax:
<ol>

<li>Wake up early</li>

<li>Exercise</li>

<li>Have breakfast</li>

<li>Start work</li>

</ol>

Output:

1. Wake up early

2. Exercise

3. Have breakfast

4. Start work

Types of Numbering in Ordered Lists

You can change the numbering style using the type attribute:
| Type | Description | |----------|---------------| | type=”1” | Default numbering (1, 2, 3…) | |
type=”A” | Uppercase letters (A, B, C…) | | type=”a” | Lowercase letters (a, b, c…) | | type=”I” |
Uppercase Roman numerals (I, II, III…) | | type=”I” | Lowercase Roman numerals (I, ii, iii…) |

Example: Ordered List with Roman Numbers

<ol type=”I”>

<li>Introduction</li>

<li>Body</li>

<li>Conclusion</li>

</ol>

Output:

I. Introduction
II. Body
III. Conclusion

2. Unordered List (<ul>)

An unordered list is used when the order of items does not matter. Items are displayed with
bullet points.

Syntax:
<ul>

<li>Apple</li>

<li>Banana</li>

<li>Mango</li>

<li>Orange</li>

</ul>

Output:

Apple

Banana

Mango

Orange

Types of Bullet Points in Unordered Lists

You can change the bullet style using the type attribute:

| Type | Description | |----------|---------------| | type=”disc” | Default (●) | | type=”circle” |


Hollow circle (○) | | type=”square” | Square (■) |

Example: Unordered List with Square Bullets


<ul type=”square”>

<li>Pen</li>

<li>Notebook</li>

<li>Eraser</li>

</ul>

Output:

■ Pen

■ Notebook

■ Eraser

3. Definition List (<dl>)

A definition list is used to define terms and their descriptions. It consists of:

<dl> – Definition List

<dt> – Definition Term (Term Name)

<dd> – Definition Description (Term Explanation)

Syntax:
<dl>

<dt>HTML</dt>

<dd>HyperText Markup Language – used to create web pages.</dd>

<dt>CSS</dt>

<dd>Cascading Style Sheets – used for styling web pages.</dd>

</dl>

Output:

HTML

HyperText Markup Language – used to create web pages.

CSS

Cascading Style Sheets – used for styling web pages.

Nested Lists (Lists Inside Lists)

You can create a list inside another list.

Example: Nested List

<ul>
<li>Fruits

<ul>

<li>Apple</li>

<li>Mango</li>

</ul>

</li>

<li>Vegetables

<ul>

<li>Carrot</li>

<li>Spinach</li>

</ul>

</li>

</ul>

Output:

Fruits

Apple

Mango

Vegetables

Carrot
Spinach

Difference Between Ordered, Unordered, and Definition Lists

Question & Answer Section

Q1: What are the three types of lists in HTML?

Answer:

1. Ordered List (<ol>) – Numbered items.

2. Unordered List (<ul>) – Bullet points.

3. Definition List (<dl>) – Terms with descriptions.


Q2: What is the default bullet style of an unordered list?

Answer: The default bullet style is a disc (●).

Q3: How can you create an ordered list with Roman numerals?

Answer: Use the type=”I” attribute in the <ol> tag.

Example:

<ol type=”I”>

<li>Introduction</li>

<li>Content</li>

<li>Conclusion</li>

</ol>

Q4: What is the purpose of the <dl> tag?


Answer: The <dl> tag is used to create a Definition List, where terms (<dt>) are followed by
their descriptions (<dd>).

Q5: How do you create a nested list in HTML?

Answer:

A nested list is a list inside another list.

Example:

<ul>

<li>Languages

<ul>

<li>HTML</li>

<li>CSS</li>

</ul>

</li>

</ul>

Output:

Languages

HTML
CSS

You might also like