HTML Lists

Lists are used to group related items together. They are one of the most commonly used elements in HTML and appear everywhere — navigation menus, shopping carts, instructions, and more. HTML supports three types of lists: unordered, ordered, and description lists.

1. Unordered List

An unordered list displays items with bullet points. The order of the items does not matter. It is used when listing things where sequence is not important.

The <ul> tag defines the list and <li> defines each item.

<h3>Grocery List</h3>
<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Bread</li>
  <li>Butter</li>
</ul>

2. Ordered List

An ordered list displays items with numbers. It is used when the sequence of items matters, like steps in a recipe or instructions.

The <ol> tag defines the list and <li> defines each item.

<h3>How to Make Tea</h3>
<ol>
  <li>Boil water in a kettle</li>
  <li>Place a tea bag in a cup</li>
  <li>Pour hot water into the cup</li>
  <li>Wait 3 minutes</li>
  <li>Remove the tea bag and add milk if desired</li>
</ol>

Ordered List – Type Attribute

The type attribute changes the numbering style of an ordered list.

<!-- Numbers (default) -->
<ol type="1">
  <li>First</li>
  <li>Second</li>
</ol>

<!-- Uppercase Letters -->
<ol type="A">
  <li>First</li>
  <li>Second</li>
</ol>

<!-- Lowercase Letters -->
<ol type="a">
  <li>First</li>
  <li>Second</li>
</ol>

<!-- Roman Numerals (uppercase) -->
<ol type="I">
  <li>First</li>
  <li>Second</li>
</ol>

<!-- Roman Numerals (lowercase) -->
<ol type="i">
  <li>First</li>
  <li>Second</li>
</ol>

Starting an Ordered List from a Custom Number

The start attribute sets the starting number of the list.

<ol start="5">
  <li>Fifth item</li>
  <li>Sixth item</li>
  <li>Seventh item</li>
</ol>

3. Description List

A description list is used to display terms and their descriptions. It is ideal for glossaries, FAQs, or any list where each item has a label and an explanation.

• <dl> – The description list container
• <dt> – The term or name
• <dd> – The description or definition of the term

<h3>Web Technology Terms</h3>
<dl>
  <dt>HTML</dt>
  <dd>A markup language used to create the structure of web pages.</dd>

  <dt>CSS</dt>
  <dd>A style sheet language used to add design and layout to web pages.</dd>

  <dt>JavaScript</dt>
  <dd>A programming language that adds interactivity and behavior to web pages.</dd>
</dl>

Nested Lists

Lists can be placed inside other lists, creating a multi-level structure. This is called a nested list.

<h3>Course Outline</h3>
<ol>
  <li>HTML Basics
    <ul>
      <li>Introduction</li>
      <li>Tags and Elements</li>
      <li>Attributes</li>
    </ul>
  </li>
  <li>CSS Basics
    <ul>
      <li>Selectors</li>
      <li>Colors and Fonts</li>
    </ul>
  </li>
  <li>JavaScript Basics</li>
</ol>

Comparison Table

Key Points to Remember

• Use <ul> for lists where item order does not matter
• Use <ol> for lists where order is important (steps, rankings)
• Use <dl> for term-definition pairs
• All list items must be wrapped in <li> tags for <ul> and <ol>
• Lists can be nested inside each other for sub-levels
• The type and start attributes customize ordered lists