HTML Lists

HTML Lists

Lists are used to group related items together. HTML provides three types of lists.

1. Unordered Lists (<ul>)

Unordered lists display items with bullet points:

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

This renders as:

• HTML
• CSS
• JavaScript

2. Ordered Lists (<ol>)

Ordered lists display items with numbers:

<ol>
    <li>Open your text editor</li>
    <li>Create a new file</li>
    <li>Write your HTML</li>
    <li>Save and open in browser</li>
</ol>

Ordered List Attributes

Attribute	Purpose	Example
type	Number style	type="A" (A, B, C), type="i" (i, ii, iii)
start	Starting number	start="5" (starts from 5)
reversed	Count backwards	<ol reversed> (3, 2, 1)

3. Description Lists (<dl>)

Description lists define terms and their descriptions:

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language — structures web content</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets — styles web content</dd>

    <dt>JavaScript</dt>
    <dd>A programming language — adds interactivity</dd>
</dl>

Nested Lists

You can place a list inside a list item to create sub-lists:

<ul>
    <li>Front-end
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>Back-end
        <ul>
            <li>Node.js</li>
            <li>Python</li>
        </ul>
    </li>
</ul>

Key Takeaways

• Use <ul> for unordered (bulleted) lists
• Use <ol> for ordered (numbered) lists
• Use <dl> for definition/description lists
• Each list item is wrapped in a <li> tag
• Lists can be nested inside each other