HTML Lists

HTML lists are used to display items in a structured format. There are two main types of lists in HTML:

• Ordered List (<ol>): Displays items in a numbered sequence.
• Unordered List (<ul>): Displays items with bullet points.

1. Ordered Lists (<ol>)

Ordered lists display items in a numbered sequence. Each item is represented using the <li> tag. Example:

        <ol>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ol>
    

Output:

1. HTML
2. CSS
3. JavaScript

2. Unordered Lists (<ul>)

Unordered lists display items with bullet points. Example:

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

Output:

• Apples
• Bananas
• Cherries

3. Nested Lists

You can create nested lists by placing one list inside another. Example:

        <ul>
            <li>Fruits
                <ul>
                    <li>Apples</li>
                    <li>Bananas</li>
                </ul>
            </li>
            <li>Vegetables</li>
        </ul>
    

Output:

• Fruits
  • Apples
  • Bananas
• Vegetables

Practical Example

Here’s a practical example combining ordered and unordered lists:

        <ol>
            <li>Frontend Development
                <ul>
                    <li>HTML</li>
                    <li>CSS</li>
                </ul>
            </li>
            <li>Backend Development</li>
        </ol>
    

Output:

1. Frontend Development
   • HTML
   • CSS
2. Backend Development

Written By: Muhammad Shoaib Khan Marwat (MSKM) | https://codebacha.blogspot.com/