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:
Example
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Ordered Lists
<ol> (ordered list) generates numbered items — ideal for step-by-step instructions, rankings, and procedural guides:
Example
<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>
<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:
Example
<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>
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:
Example
<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>
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.
❓ FAQ
<ul> and <ol>? When should I use each?<ul> is an unordered list — marked with bullets, squares, or other symbols — suitable for items with no sequence, like navigation menus, feature lists, or key points. <ol> is an ordered list — marked with numbers or letters — suitable for items with a specific order, like step-by-step instructions, rankings, or tutorial outlines. Choose based on whether the items have a sequential relationship.<ul> or <ol> inside a <li> to create sublists. Common scenarios: multi-level directories, tree menus, outline structures. However, keep it to 3-4 levels max — deep nesting hurts readability and displays poorly on mobile. You can mix <ul> and <ol> when nesting, like ordered outer with unordered inner.<dl> definition list? How does it differ from <ul>/<ol>?<dl> (Definition List) is designed for term-description pairs, composed of <dt> (term) and <dd> (description). Typical scenarios: FAQs, glossaries, product specs, metadata. <ul>/<ol> are collections of "list items," while <dl> is a collection of "key-value pairs." In HTML5, <dl> can also be used for author information, contact details, and other metadata.📖 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; theopenattribute 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).