HTML Lists – Ordered, Unordered and Description Lists

Lists are everywhere, from menus to FAQs and instructions. In HTML, you can create three types of lists:

• Unordered lists (bulleted)
• Ordered lists (numbered)
• Description lists (terms and definitions)

Let’s look at each type with easy examples.

Unordered List (<ul>)

Used when the order of items doesn’t matter, like a shopping list. This creates a bulleted list.

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

Explanation:

• <ul> – Defines an unordered list
• <li> – list item, used inside lists (both <ul> and <ol>) to define each item in the list.

Customizing with CSS

<ul style="list-style-type: square;">
  <li>Item One</li>
  <li>Item Two</li>
</ul>

<ul style="list-style-type: square;">
  <li>Item One</li>
  <li>Item Two</li>
</ul>

list-style-type options:

• disc (default bullet)
• circle
• square
• none (no bullets)

You can change the bullet style using CSS as shown in the above example.

Ordered List (<ol>)

Used when the order does matter, like steps in a recipe or instructions. This displays items in a numbered or alphabetical order.

<ol>
  <li>Turn on the computer</li>
  <li>Open the browser</li>
  <li>Start coding</li>
</ol>

<ol>
  <li>Turn on the computer</li>
  <li>Open the browser</li>
  <li>Start coding</li>
</ol>

Explanation:

<ol> – Defines an ordered list (adds numbers automatically)

Customizing with CSS

<ol type="A" start="3">
  <li>Item A</li>
  <li>Item B</li>
</ol>

<ol type="A" start="3">
  <li>Item A</li>
  <li>Item B</li>
</ol>

Explanation:

• type – Changes numbering style (1, A, a, I, i)
• start – Defines the starting number

You can change the type using CSS as shown in the above example.

Description List (<dl>)

Used for listing terms and their definitions or descriptions, great for glossaries or FAQs.

<dl>
  <dt>HTML</dt>
  <dd>A markup language for web pages.</dd>

  <dt>CSS</dt>
  <dd>Used for styling HTML content.</dd>
</dl>

<dl>
  <dt>HTML</dt>
  <dd>A markup language for web pages.</dd>

  <dt>CSS</dt>
  <dd>Used for styling HTML content.</dd>
</dl>

Explanation:

• <dl> – defines a description list
• <dt> – defines definition term
• <dd> – defines definitions or descriptions

Summary

Practice Challenge

Create a web page that has:

• A bulleted list of your favorite fruits
• A numbered list of your morning routine steps
• A description list for 3 glossary terms (take any 3 hard words)