HTML Lists

HTML lists are used to organize related information in a structured way. Lists help display multiple items clearly and improve webpage readability. HTML provides three main types of lists: Ordered Lists, Unordered Lists, and Description Lists.

Ordered List (<ol>)

An ordered list displays items in a numbered format. It is useful when the sequence or order of items is important. For example, instructions, steps, or rankings.

Syntax 


<ol>

    <li>Item 1</li>

    <li>Item 2</li>

    <li>Item 3</li>

</ol>

Example 


<ol>

    <li>HTML</li>

    <li>CSS</li>

    <li>JavaScript</li>

</ol>

Output

  1. HTML
  2. CSS
  3. JavaScript

Unordered List (<ul>)

An unordered list displays items using bullet points. It is used when the order of items is not important.

Syntax 


<ul>

    <li>Item 1</li>

    <li>Item 2</li>

    <li>Item 3</li>

</ul>

Example 


<ul>

    <li>HTML</li>

    <li>CSS</li>

    <li>JavaScript</li>

</ul>

Output

  • HTML
  • CSS
  • JavaScript

Description List (<dl>)

A description list is used to display terms and their descriptions. It uses three tags: <dl>, <dt>, and <dd>.

Syntax 


<dl>

    <dt>Term</dt>

    <dd>Description</dd>

</dl>

Example 


<dl>


    <dt>HTML</dt>

    <dd>HyperText Markup Language</dd>



    <dt>CSS</dt>

    <dd>Cascading Style Sheets</dd>


</dl>

Output

HTML
HyperText Markup Language
CSS
Cascading Style Sheets

Best Practices

  • Use ordered lists when sequence is important.
  • Use unordered lists when order does not matter.
  • Use description lists for terms and definitions.
  • Keep list items simple and meaningful.
  • Use nested lists for grouping related information.
  • Choose the correct list type according to content.