List Tag Full details with suitable example

csaccept.com define the complete explanation of the <list> tags in HTML, including all three main types — ordered lists, unordered lists, and definition lists — along with proper syntax, attributes, and examples.

What is a List in HTML?

A list in HTML is used to group related items together. Lists make it easier to organize and display information in a structured way, such as bullet points or numbered sequences.

HTML supports three main types of lists:

  1. Ordered List (<ol>) – Numbered list
  2. Unordered List (<ul>) – Bulleted list
  3. Description/Definition List (<dl>) – Term and description list

1. Unordered List (<ul>)

An unordered list displays items using bullets (•) by default.

Syntax:

<ul>
  <li>Items 1</li>
  <li>Items 2</li>
  <li>Items 3</li>
</ul>

Output:

• Items 1
• Items 2
• Items 3

Attributes of <ul>:

  • type: Specifies the bullet style.
    Values:

    • disc (●) – default
    • circle (○)
    • square (■)

Example with Attribute:

<ul type="square">
  <li>Mango</li>
  <li>Papaya</li>
  <li>Orange</li>
</ul>

2. Ordered List (<ol>)

An ordered list displays items with numbers or letters in sequence.

Syntax:

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

Output:

  1. Step 1
  2. Step 2
  3. Step 3

Attributes of <ol>:

  • type: Defines the type of numbering.
    • 1 → 1, 2, 3 (default)
    • A → A, B, C
    • a → a, b, c
    • I → I, II, III
    • i → i, ii, iii
  • start: Specifies the starting number or letter.
  • reversed: Displays the list in reverse order.

Example with Attributes:

<ol type="A" start="3">
  <li>Computer</li>
  <li>Laptop</li>
  <li>Desktop</li>
</ol>

Example with reversed:

<ol reversed>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

3. Description/Definition List (<dl>)

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

Syntax:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language - csaccept.com</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Tags Explanation:

  • <dl> → Defines the description list container
  • <dt> → Defines the term (title)
  • <dd> → Defines the description (definition)

Output:

HTML
→ HyperText Markup Language – csaccept.com

CSS
→ Cascading Style Sheets

 (Lists inside Lists)Nested Lists

You can create a list inside another list for sub-items.

Example:

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Mango</li>
      <li>Orange</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

Output:

  • Fruits
    • Apple
    • Mango
    • Orange
  • Vegetables

Complete Example (All Types Together)

<!DOCTYPE html>
<html>
<head>
  <title>HTML List Example</title>
</head>
<body>

<h2>Unordered List</h2>
<ul type="circle">
  <li>Apple</li>
  <li>Banana</li>
  <li>Grapes</li>
</ul>

<h2>Ordered List</h2>
<ol type="I" start="2">
  <li>Introduction</li>
  <li>Chapter 1</li>
  <li>Chapter 2</li>
</ol>

<h2>Description List</h2>
<dl>
  <dt>CPU</dt>
  <dd>Central Processing Unit</dd>
  <dt>RAM</dt>
  <dd>Random Access Memory</dd>
</dl>

</body>
</html>

Summary Table

List Type Tag Used Displays Example
Unordered List <ul> Bullets Shopping list
Ordered List <ol> Numbers / Letters Steps or sequence
Description List <dl> Terms and meanings Glossary or definitions