HTML Lists

Lists organize related content. HTML provides three types: unordered lists (bullet points), ordered lists (numbered), and definition lists (term + description).

Unordered Lists

<ul> (unordered list) combined with <li> (list item) creates bullet-point lists — ideal for menus, categories, feature lists, and other content without a required sequence:

HTML

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

▶ Try It Yourself

Ordered Lists

<ol> (ordered list) generates numbered items — ideal for step-by-step instructions, rankings, and procedural guides:

HTML

<ol>
  <li>Open your editor</li>
  <li>Write some HTML</li>
  <li>Save as an .html file</li>
  <li>Open in your browser</li>
</ol>

▶ Try It Yourself

📌 Nested Lists: Lists can be nested inside one another — place a <ul> or <ol> inside an <li> to create multi-level hierarchies. Multi-level dropdown navigation menus are built using nested lists.

Definition Lists

<dl> (definition list) contains a series of <dt> (terms) and <dd> (descriptions), ideal for glossaries, metadata, and Q&A formats:

HTML

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language, the skeleton of web pages</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets, controlling the look of web pages</dd>
</dl>

▶ Try It Yourself

Collapsible Lists

<details> and <summary> are HTML5 tags for creating expandable/collapsible content blocks — commonly used for FAQ sections and collapsible documentation menus. Click the <summary> heading to toggle the expand/collapse state:

HTML

<details>
  <summary>What is HTML?</summary>
  <p>HTML is the HyperText Markup Language used to create web pages.</p>
</details>

<details open>
  <summary>What is CSS?</summary>
  <p>CSS controls the styling and layout of web pages.</p>
</details>

▶ Try It Yourself

📌 The open Attribute: Adding the open attribute to <details> makes the content expanded by default (with open = expanded; without = collapsed). Browsers automatically add an expand/collapse arrow to <summary> — no extra CSS or JavaScript needed.

📖 Summary

<ul> unordered list + <li> list items (bullet points)
<ol> ordered list + <li> list items (numbered)
<dl> definition list + <dt> term + <dd> description
<details> + <summary> collapsible list; the open attribute controls default expansion
Lists can be nested to create multi-level structures

📝 Exercises

Build a menu: Use an unordered list to create a site navigation menu with links for Home, Products, About Us, and Contact.
Nested lists: Create a nested list: an outer ordered list (steps) with an inner unordered list (notes for each step).

← Previous: HTML Responsive Images Next: HTML Tables →