HTML Lists & Structural Containers

HTML lists group related items together (`

`, `
`, `

`, ``). HTML containers like `

`, ``, `

`, and `

` structure page content cleanly. Master block vs inline box models and zero-JavaScript accordions.

Live Code Example Overview

Click Try it Yourself » to test custom lists, menu toolbars, block/inline spans, and native details accordions in the playground.

Example: HTML Lists & Structural Containers Overview

<!-- Unordered & Ordered Lists --> <ul style="list-style-type: square;"> <li>HTML5 Semantics</li> <li>CSS Grid & Flexbox</li> </ul> <ol reversed type="A"> <li>Final Step</li> <li>Initial Step</li> </ol> <!-- Description List --> <dl> <dt><strong>DOM</strong></dt> <dd>Document Object Model tree representation.</dd> </dl> <!-- Block & Inline Containers --> <div style="background:#4f46e5;color:white;padding:10px;border-radius:6px;"> Block Div with an <span style="color:#f59e0b;font-weight:bold;">Inline Span</span> highlight. </div> <!-- Native Accordion --> <details style="margin-top:10px;"> <summary><strong>What is &lt;details&gt;?&lt;/strong&gt;</summary> <p>Creates a native toggle accordion widget without any JavaScript!</p> </details>

Try it Yourself »

6.1 HTML List Types (<ul>, <ol>, <dl>, <menu>)

HTML provides 4 list structures tailored for different content ordering needs:

• <ul> — Unordered list styled with bullets (disc, circle, square, none).
• <ol> — Ordered numbered/alphabetical list (supports type="1|A|a|I|i", start, and reversed).
• <dl> — Description list pairing terms (<dt>) with descriptions (<dd>).
• <menu> — Semantic list container specifically designed for toolbar commands and interactive menus.

Visual List Types Comparison: Unordered, Ordered, Description & Menu

Try It Yourself: All HTML List Types

<!-- Unordered List --> <ul style="list-style-type: circle;"> <li>Item A</li> <li>Item B</li> </ul> <!-- Ordered List --> <ol type="I" start="5"> <li>Fifth Chapter</li> <li>Sixth Chapter</li> </ol> <!-- Description List --> <dl> <dt><strong>API</strong></dt> <dd>Application Programming Interface.</dd> </dl>

Try it Yourself »

6.2 HTML Block vs. Inline Elements (<div> vs. <span>)

Every HTML element has a default display value depending on its type:

• Block-level Elements: Always start on a new line and stretch out to fill the full container width (e.g. <div>, <p>, <h1>-<h6>, <ul>, <form>).
• Inline Elements: Do not start on a new line and take up only as much width as necessary for their content (e.g. <span>, <a>, <strong>, <em>, <img>).

Block vs Inline Layout Behavior Infographic

Try It Yourself: Block Divs & Inline Spans

<div style="background:#4f46e5;color:white;padding:12px;border-radius:8px;"> Full-width Block Div 1 </div> <div style="background:#059669;color:white;padding:12px;border-radius:8px;margin-top:10px;"> Full-width Block Div 2 with <span style="background:#f59e0b;color:#0f172a;padding:2px 8px;border-radius:4px;font-weight:700;">Inline Span Badge</span> inside. </div>

Try it Yourself »

6.3 Native Accordions (<details> & <summary>)

The <details> element creates an interactive disclosure widget that users can toggle open and closed. The <summary> element specifies a visible heading for the details widget:

• No JavaScript required — native browser toggle state handling.
• Use the open attribute to render the accordion expanded by default.

Pro Tip: You can style details[open] in CSS to create custom smooth accordion open transitions without writing any JS event listeners!

Try It Yourself: Native Details Accordion Widget

<details open style="background:#f8fafc;border:1px solid #cbd5e1;padding:12px;border-radius:8px;"> <summary style="font-weight:700;cursor:pointer;color:#0f172a;">Accordion Item 1 (Expanded by Default)</summary> <p style="color:#475569;margin-top:8px;margin-bottom:0;">This accordion opens automatically because the open attribute is set!</p> </details> <details style="background:#f8fafc;border:1px solid #cbd5e1;padding:12px;border-radius:8px;margin-top:10px;"> <summary style="font-weight:700;cursor:pointer;color:#0f172a;">Accordion Item 2 (Click to Toggle)</summary> <p style="color:#475569;margin-top:8px;margin-bottom:0;">Zero JavaScript required for interactive expandable content!</p> </details>

Try it Yourself »

💻 Chapter 6 Hands-On Code Challenge

Build a Custom Syllabus & Interactive FAQ Component incorporating an ordered study plan list, description list glossary, block <div> card, and native <details> accordion:

1. Create an <ol> listing 3 study steps.
2. Create a <dl> definition list for HTML terms (e.g. DOM and Syntax).
3. Add a block <div> containing inline <span> highlights.
4. Add a native <details> and <summary> accordion component.

🚀 Solve Challenge in Playground »

Chapter 6 Key Takeaways

• <ul> is for bulleted lists; <ol> is for ordered lists; <dl> is for term-definition pairs; <menu> is for toolbars.
• Block elements (<div>, <p>) start on a new line and span full width; inline elements (<span>, <a>) flow side-by-side.
• <details> and <summary> create zero-JS native expandable accordion widgets.