HTML: HTML Lists
Last updated: 2026-09-08
Lists organize related content. HTML provides three types: unordered lists (bullet points), ordered lists (numbered), and definition lists (term + description).
1. 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
▶ Try it Yourself2. Ordered Lists
<ol> (ordered list) generates numbered items — ideal for step-by-step instructions, rankings, and procedural guides:
▶ Example
▶ Try it Yourself<ul> or <ol> inside an <li> to create multi-level hierarchies. Multi-level dropdown navigation menus are built using nested lists.
3. Definition Lists
<dl> (definition list) contains a series of <dt> (terms) and <dd> (descriptions), ideal for glossaries, metadata, and Q&A formats:
▶ Example
▶ Try it Yourself4. 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
▶ Try it Yourselfopen 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).
