HTML Lists

Types of Lists

HTML supports three main types of lists:

<ul> – Unordered (bulleted)
<ol> – Ordered (numbered)
<dl> – Description (definition list)

Unordered List

Use <ul> with <li> for bullet points. By default, browsers display filled round bullets (disc style), but you can change the bullet style using the CSS list-style-type property.

disc – ● (default)
circle – ○
square – ■
none – no bullet (useful for custom icons or navigation menus)

<ul style="list-style-type: square;">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Ordered List

Use <ol> with <li> for numbered lists. The type attribute can change the numbering style:

type="1" – 1, 2, 3 (default)
type="A" – A, B, C
type="a" – a, b, c
type="I" – I, II, III (uppercase Roman numerals)
type="i" – i, ii, iii (lowercase Roman numerals)

You can also use the start attribute to begin numbering from a specific value.

<ol type="A" start="3">
  <li>First</li>
  <li>Second</li>
</ol>

Description List

Use <dl> for term–definition pairs, like a glossary or key–value list. Inside a description list:

<dt> – Defines the term or name (Description Term)
<dd> – Provides the description or definition (Description Details)

A single term (<dt>) can have multiple definitions (<dd>), and you can group related items together without extra markup.

You can style description lists with CSS to adjust indentation, font style, and spacing between terms and definitions. For example:

dl {
  margin: 20px;
}
dt {
  font-weight: bold;
}
dd {
  margin: 0 0 10px 20px;
}

Example:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
  <dt>JavaScript</dt>
  <dd>A programming language for the web</dd>
</dl>

Nesting Lists

You can nest one list inside another to create sub-categories:

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

Practice Prompt

Create the following:

An unordered list with three items
An ordered list with type="i"
A description list with at least two terms and definitions

<ul>
  <li>Red</li>
  <li>Blue</li>
  <li>Green</li>
</ul>

<ol type="i">
  <li>One</li>
  <li>Two</li>
</ol>

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

Need Help?

Ask the AI if you need help understanding or want to dive deeper in any topic

Menu