HTML Lists:

What are HTML Lists?

HTML lists allow us to organize and display items in a structured format. There are three main types of lists:

1️⃣ Ordered List (<ol>) → Numbered list
2️⃣ Unordered List (<ul>) → Bulleted list
3️⃣ Description List (<dl>) → Term and description list

1️⃣ Ordered Lists (`<ol>`)

An ordered list displays items in a specific sequence using numbers or letters.

Basic Syntax:

<ol>
    <li>Step 1: Preheat the oven</li>
    <li>Step 2: Mix ingredients</li>
    <li>Step 3: Bake the cake</li>
</ol>

✔ Each <li> (list item) represents one step.
✔ The browser automatically numbers the items.

Changing Numbering Style

You can customize the numbering style using the type attribute:

<ol type="A">  <!-- Uses uppercase letters -->
    <li>Item 1</li>
    <li>Item 2</li>
</ol>

Type Value	Numbering Style
`1` (default)	1, 2, 3, 4...
`A`	A, B, C, D...
`a`	a, b, c, d...
`I`	I, II, III, IV...
`i`	i, ii, iii, iv...

2️⃣ Unordered Lists (`<ul>`)

An unordered list displays items with bullets instead of numbers.

Basic Syntax:

<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
</ul>

✔ Default bullets are solid circles.

Changing Bullet Style

You can change the bullet style using CSS:

ul {
    list-style-type: square; /* Options: disc, circle, square */
}

Value	Bullet Style
`disc` (default)	● Bullet
`circle`	○ Hollow Circle
`square`	■ Square

3️⃣ Description Lists (`<dl>`)

A description list is used to define terms and descriptions.

Basic Syntax:

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

✔ <dt> → Defines the term.
✔ <dd> → Defines the description.

4️⃣ Nested Lists (Lists Inside Lists)

You can nest lists inside each other.

Example:

<ul>
    <li>Fruits
        <ul>
            <li>Apple</li>
            <li>Banana</li>
        </ul>
    </li>
    <li>Vegetables
        <ul>
            <li>Carrot</li>
            <li>Spinach</li>
        </ul>
    </li>
</ul>

✔ This creates a list inside a list for better organization.

Summary Table

List Type	Tag	Usage
Ordered List	`<ol>`	Numbered steps or rankings
Unordered List	`<ul>`	Bullet points for unordered items
Description List	`<dl>`	Term and description pairs
Nested List	`<ul>` / `<ol>` inside another list	Hierarchical data

Best Practices

✅ Use <ol> for sequential steps.
✅ Use <ul> for unordered information.
✅ Use <dl> for definitions or explanations.
✅ Use CSS to style lists for better appearance.

HTML

HTML Lists:

What are HTML Lists?

1️⃣ Ordered Lists (<ol>)

Basic Syntax:

Changing Numbering Style

2️⃣ Unordered Lists (<ul>)

Basic Syntax:

Changing Bullet Style

3️⃣ Description Lists (<dl>)

Basic Syntax:

4️⃣ Nested Lists (Lists Inside Lists)

Example:

Summary Table

Best Practices

1️⃣ Ordered Lists (`<ol>`)

2️⃣ Unordered Lists (`<ul>`)

3️⃣ Description Lists (`<dl>`)