main — Complete Guide
main — 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 34 of 100
main
Basics ✓ → Forms & semantics → APIs & performance → Projects
Forms & semantics · 2 — Forms, SEO, a11y · ~6 min · HTML — Semantic HTML & SEO
What is this?
main holds the dominant unique content of the document — one per page.
Why should you care?
MarkupVerse skip links jump to main so keyboard users bypass repeated chrome.
See it live — copy this example
Save as demo.html and open in your browser, or use Run Example below.
<a class="skip" href="#main">Skip to content</a>
<header>…</header>
<main id="main">
<h1>Transfers</h1>
<p>Send money to saved payees.</p>
</main>Run Example »
Edit the code below and click Run to see the result in Toolliyo’s live editor.
What happened?
- Don’t put page-wide nav inside main.
- id on main enables skip links.
- Only one main.
Practice next
- Add skip link.
- Wrap unique content in main.
- Ensure single main.
- Focus #main on skip.
- Move aside outside main.
Remember
One main. Skip target. No global nav inside.
MarkupVerse skip to main
Keyboard users skip chrome.
Outcome: Faster reach to Transfers h1.
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!
