HTML Lists

HTML supports three main types of lists:

  • Unordered list (<ul>) — bullet points
  • Ordered list (<ol>) — numbered/lettered items
  • Description list (<dl>) — terms and descriptions

1) Unordered List (bullets)


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

2) Ordered List (numbers/letters)


<ol>
  <li>Step 1</li>
  <li>Step 2</li>
  <li>Step 3</li>
</ol>

<!-- Roman numerals -->
<ol type="I">...</ol>
  1. Step 1
  2. Step 2
  3. Step 3
  1. Phase One
  2. Phase Two

3) Ordered List with start & reversed


<ol start="5">
  <li>Item</li>
  <li>Item</li>
</ol>

<ol reversed>
  <li>Final</li>
  <li>Middle</li>
  <li>Start</li>
</ol>
  1. Item
  2. Item
  1. Final
  2. Middle
  3. Start

4) Nested Lists


<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Backend
    <ol>
      <li>PHP</li>
      <li>Python</li>
    </ol>
  </li>
</ul>
  • Frontend
    • HTML
    • CSS
  • Backend
    1. PHP
    2. Python

5) Description List (terms & definitions)


<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>
HTML
HyperText Markup Language
CSS
Cascading Style Sheets

6) Changing Bullet/Number Styles (CSS)


<ul style="list-style-type: square;">
  <li>Square bullet</li>
</ul>

<ol style="list-style-type: lower-alpha;">
  <li>a, b, c…</li>
</ol>
  • Square bullet
  1. a, b, c…

Tip: Keep list items concise. Use nested lists to organize information hierarchically.