Web Development on Telegram: “🌐 Web Development Roadmap

🌐 Web Development Roadmap — Part 18

HTML Lists

Lists are used whenever information needs to be presented as a group of related items.

1. Unordered List

An unordered list displays items with bullets.

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

It produces:

• HTML

• CSS

• JavaScript

<ul> means unordered list.

2. List Item

Each item inside a list uses <li>.

<li>HTML</li>

Think of it as:

<ul> → List container

↓

<li> → Individual item

3. Ordered List

An ordered list displays items in a sequence, usually using numbers.

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

It produces:

1. Learn HTML

2. Learn CSS

3. Learn JavaScript

<ol> means ordered list.

4. When to Use Which?

Use <ul> when order doesn't matter:

<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

Use <ol> when order or sequence matters:

<ol>
    <li>Create an account</li>
    <li>Verify your email</li>
    <li>Log in</li>
</ol>

5. Nested Lists

A list can contain another list.

<ul>
    <li>
        Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>

    <li>
        Backend
        <ul>
            <li>Node.js</li>
            <li>Express</li>
        </ul>
    </li>
</ul>

The structure becomes:

• Frontend

• HTML

• CSS

•

JavaScript

•

Backend

• Node.js

• Express

6. Lists in Navigation

Lists are commonly used to structure navigation menus.

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

CSS can later transform this into a horizontal navigation bar.

7. Lists in Real Websites

Lists are useful for many things:

• Shopping items

• Features

• Navigation menus

• Steps

• Skills

• Categories

• Search results

• Product specifications

For example:

<h2>My Skills</h2>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>React</li>
</ul>

8. Important Rule

<li> should normally be used as a child of a list such as <ul> or <ol>.

Good:

<ul>
    <li>HTML</li>
    <li>CSS</li>
</ul>

Not appropriate:

<li>HTML</li>
<li>CSS</li>

🧠 Remember

<ul> → Unordered list → Bullets

<ol> → Ordered list → Numbers/sequence

<li> → List item → Individual item

Key Takeaway

<ul>
   ↓
Unordered group
   ↓
<li> Item
<li> Item
<li> Item

and

<ol>
   ↓
Ordered group
   ↓
<li> Step 1
<li> Step 2
<li> Step 3

Lists are simple, but they are fundamental to creating well-structured HTML content.

Double Tap ❤️ For More