Ordered and Unordered Lists
Create ordered, unordered, and description lists.
Learning Goals
The Core Concept
Lists organize information clearly. Unordered lists (bullets) group items without implying order. Ordered lists (numbers) show sequence matters, like steps or rankings. Description lists pair terms with definitions.
Unordered lists use <ul> tags with <li> children. Ordered lists use <ol> tags with <li> children. Description lists use <dl> wrapping <dt> (term) and <dd> (definition) pairs.
Lists can be nested inside each other, creating hierarchies. This is useful for:
- Table of contents
- Step-by-step instructions
- Feature lists
- Glossaries
- Navigation menus
Proper list markup improves:
- Screen reader navigation
- Search engine understanding
- Semantic document structure
- CSS styling possibilities
Lists with proper semantics are more accessible and easier to style consistently.
Visual guide
Html concept flow
A simple original diagram to connect the lesson idea with real project flow.
Code & Implementation
<!-- Unordered list -->
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<!-- Ordered list -->
<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>
<!-- Nested lists -->
<ul>
<li>Main topic
<ul>
<li>Subtopic 1</li>
<li>Subtopic 2</li>
</ul>
</li>
<li>Another topic</li>
</ul>
<!-- Description list -->
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>Expected Output
Rendered preview: - Main heading: Ordered and Unordered Lists - Intro text block is visible - Layout follows clean documentation spacing
Practical Project: Ordered and Unordered Lists Implementation
Hands-on practice task
The Challenge
Apply your knowledge of Ordered and Unordered Lists to build a real-world feature. This project helps you move beyond theory and understand how HTML works in professional settings.
Helpful Hints
- •Refer back to the 'Steps' section for the correct sequence.
- •Check the 'Tips' for common optimization patterns.
- •Look at the 'Code Highlights' to ensure you're using the right syntax.
Quick Knowledge Check
What is ordered and unordered lists in HTML?
Is ordered and unordered lists difficult for beginners?
How should I practice ordered and unordered lists daily?
Why is this topic important for real projects?
Continue Learning
Next steps after this lesson
Apply your knowledge of Ordered and Unordered Lists to build a real-world feature. This project helps you move beyond theory and understand how HTML works in professional settings.
Ready to put your coding skills to the test?
Don't just read—write code! Use our free Try-Code Playground to experiment with real-time preview, or search utilities on our Developer Tools List.