HTML - Lists in HTML

Introduction

Lists in HTML are used to present information in an organized and structured way. They help display items clearly, making content easier to read and understand. Lists are commonly used for menus, instructions, features, or grouped data on webpages.

HTML provides different types of lists depending on how information should be presented.

Types of HTML Lists

There are three main types of lists:

  1. Unordered List

  2. Ordered List

  3. Description List

Each type serves a different purpose.

Unordered Lists

An unordered list displays items with bullet points. The order of items does not matter.

It uses the  tag with list items defined by 

 

  • Example:
<ul> <li>Apple</li> <li>Mango</li> <li>Orange</li> </ul>

This list shows items using bullet markers.

Common uses:

  • Navigation menus

  • Feature lists

  • Shopping items

Ordered Lists

An ordered list displays items in a numbered or sequential format. The order is important.

It uses the tag withIt uses the  tag with elements.

 

Example:

<ol> <li>Start computer</li> <li>Open browser</li> <li>Visit website</li> </ol>

Items are automatically numbered.

Ordered lists can also change numbering styles:

 
<ol type="A">

Other formats include numbers, letters, or Roman numerals.

Common uses:

  • Step-by-step instructions

  • Rankings

  • Procedures

Description Lists

A description list is used to display terms and their explanations.

It uses:

  • for the list

  • for the term

  • for the description

Example:

<dl> <dt>HTML</dt> <dd>Language for creating webpages</dd> <dt>CSS</dt> <dd>Used for styling webpages</dd> </dl>

Common uses:

  • Glossaries

  • Definitions

  • FAQs

Nested Lists

Lists can be placed inside other lists to create hierarchy.

Example:

<ul> <li>Fruits <ul> <li>Apple</li> <li>Banana</li> </ul> </li> </ul>

This allows structured categorization of items.

Importance of Lists

Using lists in HTML:

  • Organizes content clearly

  • Improves readability

  • Enhances webpage structure

  • Helps navigation design

  • Supports accessibility tools

Summary

HTML lists provide structured ways to display grouped information. Unordered lists present items without sequence, ordered lists show step-based or ranked data, and description lists define terms and explanations. Understanding lists helps students create well-organized webpages and prepares them for more advanced layout and styling techniques.