HTML Lists

Unordered List (<ul>)

The <ul> tag defines an unordered (bulleted) list, used for items where order does not matter. Each item is defined using <li>.


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

Nested Unordered List

Nested <ul> tags can create hierarchical sublists.

  • Fruits
    • Apples
    • Bananas
    • Oranges
  • Vegetables
    • Carrots
    • Broccoli

<ul>
    <li>Fruits
        <ul>
            <li>Apples</li>
            <li>Bananas</li>
            <li>Oranges</li>
        </ul>
    </li>
    <li>Vegetables
        <ul>
            <li>Carrots</li>
            <li>Broccoli</li>
        </ul>
    </li>
</ul>

Ordered List (<ol>)

The <ol> tag defines a numbered list, used when order matters.

  1. First step
  2. Second step
  3. Third step

<ol>
    <li>First step</li>
    <li>Second step</li>
    <li>Third step</li>
</ol>

Nested Ordered List

Nested <ol> tags create sublists with their own numbering.

  1. Project Planning
    1. Define objectives
    2. Identify resources
  2. Execution
    1. Develop tasks
    2. Monitor progress

<ol>
    <li>Project Planning
        <ol>
            <li>Define objectives</li>
            <li>Identify resources</li>
        </ol>
    </li>
    <li>Execution
        <ol>
            <li>Develop tasks</li>
            <li>Monitor progress</li>
        </ol>
    </li>
</ol>

Description List (<dl>)

The <dl> tag defines terms and their descriptions using <dt> and <dd>.

HTML
HyperText Markup Language, used for structuring content.
CSS
Cascading Style Sheets, used for styling content.

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language, used for structuring content.</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets, used for styling content.</dd>
</dl>

Nested Description List

Nested lists like <ul> or <ol> can be inside <dd> for more detail.

HTML
HyperText Markup Language
  • Tags: Define structure
  • Attributes: Provide extra info
CSS
Cascading Style Sheets
  • Selectors: Target elements
  • Properties: Define styles

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language
        <ul>
            <li>Tags: Define structure</li>
            <li>Attributes: Provide extra info</li>
        </ul>
    </dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets
        <ul>
            <li>Selectors: Target elements</li>
            <li>Properties: Define styles</li>
        </ul>
    </dd>
</dl>