HTML lists organize related items into visual bullet points, numbered sequences, or key-value terms. You create lists using unordered (<ul>), ordered (<ol>), or description (<dl>) list elements.
HTML provides three primary list structures:
<!-- Unordered List (Bulleted) -->
<ul>
<li>HTML5 Structure</li>
<li>CSS3 Styling</li>
</ul>
<!-- Ordered List (Numbered) -->
<ol type="1">
<li>Step 1: Write HTML</li>
<li>Step 2: Add Styles</li>
</ol>
<!-- Description List (Key-Value Terms) -->
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>
List element categories:
<ul>): Groups items where order does not matter; renders with bullet points.<ol>): Displays sequential items numbered with numbers (1), letters (A, a), or Roman numerals (I, i).<dl>): Pairs term definitions using <dt> (definition term) and <dd> (definition description).flowchart TD
A["HTML Lists"] --> B["Unordered List (ul) -> Bullet Points"]
A --> C["Ordered List (ol) -> Sequential Numbers / Letters"]
A --> D["Description List (dl) -> Term (dt) + Details (dd)"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Lists Demonstration</title>
</head>
<body style="font-family: system-ui, sans-serif; background-color: #0f172a; color: #f8fafc; padding: 2rem;">
<h2>Web Developer Skills Roadmap</h2>
<!-- Ordered step-by-step list -->
<ol style="background-color: #1e293b; padding: 1.5rem 2rem; border-radius: 8px;">
<li style="margin-bottom: 0.5rem;">Master HTML5 Semantic Elements</li>
<li style="margin-bottom: 0.5rem;">Learn Responsive CSS Flexbox & Grid</li>
<li style="margin-bottom: 0.5rem;">Understand Modern JavaScript ES6+</li>
</ol>
<h2>Glossary Terms</h2>
<dl style="background-color: #1e293b; padding: 1.5rem; border-radius: 8px;">
<dt style="color: #38bdf8; font-weight: bold;">DOM</dt>
<dd style="margin-left: 0; margin-bottom: 1rem;">Document Object Model tree representation of web pages.</dd>
</dl>
</body>
</html>
<ul> or <ol>) inside an existing <li> item rather than directly between <li> siblings.list-style: none for custom UI components: Strip browser bullet formatting when turning <ul> lists into navigation bars or card grids.<ol> when order matters: Use ordered lists for recipes, tutorial instructions, ranking charts, and step-by-step procedures.Create a nested navigation menu using an unordered list (<ul>) with 3 main items (Home, Services, Contact), where "Services" contains a nested sub-list with "Web Design" and "SEO"!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.