Lists — Complete Guide
Lists — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of HTML Tutorial on Toolliyo Academy.
On this page
HTML Tutorial · Lesson 6 of 100
Lists
Basics → Forms & semantics → APIs & performance → Projects
Basics · 1 — Structure & media · ~6 min · HTML — Foundations
What is this?
ul/ol create bullet or numbered lists; li holds each item. dl is for term/definition pairs.
Why should you care?
MarkupVerse feature lists and steps use real list markup for accessibility.
See it live — copy this example
Save as demo.html and open in your browser, or use Run Example below.
<ul>
<li>Instant transfers</li>
<li>Card controls</li>
<li>24/7 support</li>
</ul>
<ol>
<li>Verify identity</li>
<li>Link account</li>
<li>Send money</li>
</ol>Run Example »
Edit the code below and click Run to see the result in Toolliyo’s live editor.
What happened?
- Don’t fake lists with dashes in a p.
- Nest lists only when needed.
- Use ol for ordered steps.
Practice next
- Build a feature ul.
- Build onboarding ol.
- Add one nested ul.
- Convert features to a dl.
- Add start="3" on an ol.
Remember
ul vs ol. li per item. Real lists for a11y.
MarkupVerse feature list
Pricing page uses ul features.
Outcome: Screen readers announce a list.
Interview prep for this lesson
Practice these questions aloud after reading—each links to a full structured answer.
Sign in to ask a question or upvote helpful answers.
No questions yet — be the first to ask!
