Headings — Complete Guide
Headings — 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 4 of 100
Headings
Basics → Forms & semantics → APIs & performance → Projects
Basics · 1 — Structure & media · ~6 min · HTML — Foundations
What is this?
Headings h1–h6 create a document outline — one h1 per page in most MarkupVerse sites.
Why should you care?
Screen readers and SEO use heading order to understand the page.
See it live — copy this example
Save as demo.html and open in your browser, or use Run Example below.
<h1>MarkupVerse Banking</h1>
<h2>Accounts</h2>
<h3>Savings</h3>
<h2>Cards</h2>Run Example »
Edit the code below and click Run to see the result in Toolliyo’s live editor.
What happened?
- Do not skip levels for style (don’t jump h1 → h4).
- Style with CSS, not fake heading size.
Practice next
- Write one h1 and two h2s.
- Nest an h3 under an h2.
- Check outline mentally.
- Rename h2s for a SaaS landing.
- Add an h3 FAQ under Support.
Remember
One main h1. Logical order. CSS for looks.
MarkupVerse outline
Banking page uses clear h1/h2.
Outcome: Outline makes sense for a11y and SEO.
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!
