HTML · Quick Reference

Lesson 10 — Lists Cheat Sheet

HTML

In one line: An unordered list is a collection of items where the order doesn't matter. Each item gets a bullet point by default. Use <ul> for things like feature lists, ingredients, o...

Key Ideas

1Unordered Lists <ul>. An unordered list is a collection of items where the order doesn't matter. Each item gets a bullet point by default. Use <ul> for things like feature lists, ingr...

2Ordered Lists <ol>. An ordered list renders items with sequential numbers. Use it when the order matters — step-by-step instructions, rankings, recipes, or legal clauses. Browsers automat...

3Description Lists <dl>. A description list pairs terms with their definitions. It uses three elements: <dl> (the container), <dt> (description term), and <dd> (description d...

4Nested Lists. Lists can be nested inside other lists by placing a new <ul> or <ol> inside an <li> element. This is commonly used for hierarchical navigation menus,...

5Lists and Navigation. Navigation menus are almost universally built with <nav><ul><li><a> patterns. The unordered list provides the semantic structure of a collectio...

Code Examples

<!-- Basic unordered list -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<!-- CSS to change bullet style -->
ul {
  list-style-type: square;  /* disc | circle | squar...

<!-- Default numbered list -->
<ol>
  <li>Preheat the oven to 180°C</li>
  <li>Mix the dry ingredients</li>
  <li>Fold in the wet ingredients</li>
</ol>

<!-- Uppercase letters, starting from C...

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — the structure of web pages.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets — controls visual presentation.</dd>

  <dt>JavaScript<...