HTML Lists

HTML offers three main types of lists: ordered lists, unordered lists, and definition lists. Each list type is used for different purposes to organize information effectively.

1️⃣ Ordered List (<ol>)

An ordered list is used when the order of the items is important, like steps in a process or ranking.

• The <ol> tag creates the ordered list container.
• Each list item is wrapped in the <li> tag.

Example:

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

This will display the list as:

1. First item
2. Second item
3. Third item

🔲 Unordered List (<ul>)

An unordered list is used when the order of the items doesn’t matter, like a list of features or items in a collection.

• The <ul> tag creates the unordered list container.
• Each list item is wrapped in the <li> tag.

Example:

<ul>
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ul>

This will display the list as:

• Item A
• Item B
• Item C

📚 Definition List (<dl>, <dt>, <dd>)

A definition list is used to define terms and their descriptions. It is often used in glossaries or for listing terms with definitions.

• The <dl> tag creates the definition list container.
• The <dt> tag defines the term.
• The <dd> tag defines the description or definition of the term.

Example:

<dl>
  <dt>HTML</dt>
  <dd>Hypertext Markup Language used to create web pages.</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets used to style web pages.</dd>
</dl>

This will display the list as:

• HTML: Hypertext Markup Language used to create web pages.
• CSS: Cascading Style Sheets used to style web pages.

🧪 Try Yourself

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

✅ Conclusion

These three types of lists—ordered, unordered, and definition—are fundamental HTML tools for organizing and presenting content in a readable way. Use them as needed to structure your webpages effectively.

📚 Resources