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