nav — Complete Guide
nav — 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 33 of 100
nav
Basics ✓ → Forms & semantics → APIs & performance → Projects
Forms & semantics · 2 — Forms, SEO, a11y · ~6 min · HTML — Semantic HTML & SEO
What is this?
nav marks major navigation blocks — skip wrapping every link list in nav.
Why should you care?
MarkupVerse primary and footer sitemaps use nav with accessible names when multiple exist.
See it live — copy this example
Save as demo.html and open in your browser, or use Run Example below.
<nav aria-label="Primary">
<ul>
<li><a href="/accounts">Accounts</a></li>
<li><a href="/transfers">Transfers</a></li>
<li><a href="/support">Support</a></li>
</ul>
</nav>
<nav aria-label="Footer">
<a href="/privacy">Privacy</a>
<a href="/terms">Terms</a>
</nav>Run Example »
Edit the code below and click Run to see the result in Toolliyo’s live editor.
What happened?
- aria-label when more than one nav.
- Lists inside nav are a common pattern.
- Don’t nav-wrap social icon rows without need.
Practice next
- Primary nav with ul.
- Footer nav with label.
- Tab the links.
- Add aria-current="page" on active link.
- Add skip link to #main.
Remember
Major nav only. Name multiples. Lists OK inside.
MarkupVerse dual nav
Primary + footer labeled.
Outcome: SR users pick the right landmark.
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!
