HTML Lists

HTML provides three types of lists to organize and display information in a structured way. Lists are one of the most commonly used elements in web pages.

---

Types of HTML Lists

List Type	Tag	Use When
Unordered List	<ul>	Order doesn't matter (bullet points)
Ordered List	<ol>	Order matters (numbered steps)
Description List	<dl>	Term and definition pairs (like a glossary)

---

Unordered List

An unordered list displays items with bullet points. Use the <ul> tag, and wrap each item in an <li> tag:

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

Result:

• HTML
• CSS
• JavaScript

---

Ordered List

An ordered list displays items with numbers or letters. Use the <ol> tag:

<ol>
    <li>Open your text editor</li>
    <li>Write your HTML code</li>
    <li>Save the file as .php</li>
    <li>Open it in a browser</li>
</ol>

Result:

1. Open your text editor
2. Write your HTML code
3. Save the file as .php
4. Open it in a browser

---

Description List

A description list is used for term-definition pairs. It uses three tags:

• <dl> — the description list container
• <dt> — the term (definition term)
• <dd> — the description (definition data)

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language — the structure of web pages</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets — controls the visual style of pages</dd>
</dl>

---

Nested Lists

You can place a list inside another list to create nested (multi-level) lists:

<ul>
    <li>Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>Backend
        <ul>
            <li>PHP</li>
            <li>Python</li>
        </ul>
    </li>
</ul>