Module 1:5 HTML Lists - Detailed Explanation with Examples

 

HTML Lists - Detailed Explanation with Examples

Ordered Lists (<ol>):

An ordered list is used when the order of items matters.

1. Item 1
2. Item 2
3. Item 3

Unordered Lists (<ul>):

An unordered list is used when the order of items does not matter.

• Apples
• Oranges
• Bananas

Definition Lists (<dl>):

A definition list is used for terms and their definitions.

HTML

HyperText Markup Language

CSS

Cascading Style Sheets

 

    <h2>Practice Example: Fruit Salad Recipe</h2>
    <h3>Ingredients:</h3>
    <ul>
        <li>Apples</li>
        <li>Oranges</li>
        <li>Bananas</li>
        <li>Grapes</li>
    </ul>

Practice Example: Fruit Salad Recipe

Ingredients:

• Apples
• Oranges
• Bananas
• Grapes

    <h3>Instructions:</h3>
    <ol>
        <li>Wash and chop all the fruits.</li>
        <li>Combine them in a large mixing bowl.</li>
        <li>Optional: Add honey or yogurt for extra flavor.</li>
        <li>Serve chilled and enjoy!</li>
    </ol>

Instructions:

1. Wash and chop all the fruits.
2. Combine them in a large mixing bowl.
3. Optional: Add honey or yogurt for extra flavor.
4. Serve chilled and enjoy!

    <h3>Glossary:</h3>
    <dl>
        <dt>Apples</dt>
        <dd>A fruit with a crisp texture and sweet flavor.</dd>
        <dt>Oranges</dt>
        <dd>A citrus fruit known for its juicy pulp and tangy taste.</dd>
        <dt>Bananas</dt>
        <dd>A long, curved fruit with a soft, creamy texture.</dd>
        <dt>Grapes</dt>
        <dd>Small, round fruits typically found in clusters.</dd>
    </dl>

Glossary:

Apples

A fruit with a crisp texture and sweet flavor.

Oranges

A citrus fruit known for its juicy pulp and tangy taste.

Bananas

A long, curved fruit with a soft, creamy texture.

Grapes

Small, round fruits typically found in clusters.