HTML <nav> Tag – Navigation Section
📌 Introduction
The <nav> tag is used to define a navigation section in a webpage.
It contains links that help users move between:
- Pages
- Sections of a page
- Important parts of a website
It is a semantic HTML element, meaning it describes its purpose clearly.
🧱 Syntax
<nav>
<!-- navigation links -->
</nav>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>Nav Example</title>
</head>
<body>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="courses.html">Courses</a>
<a href="contact.html">Contact</a>
</nav>
<h1>Welcome to My Website</h1>
</body>
</html>
🖥️ Output Explanation
- A navigation bar appears with links
- Users can click to move between pages
- It organizes website structure clearly
🎯 Why <nav> is Important
1. 🧭 Structure
It clearly defines the navigation area of a website.
2. 🔍 SEO Benefits
Search engines understand:
- “This part contains navigation links”
3. ♿ Accessibility
Screen readers can easily identify navigation menus.
📦 Where to Use <nav>
Common places:
- Top menu (header navigation)
- Sidebar menu
- Footer links
Example:
<nav>
<a href="#">Home</a>
<a href="#">Services</a>
<a href="#">Blog</a>
</nav>
⚖️ <nav> vs <div>
| Tag | Purpose |
|---|---|
<nav> |
Semantic navigation area |
<div> |
Generic container |
✔ Use <nav> when it contains links for navigation
❌ Don’t use <div> for menus when <nav> is appropriate
🎨 Styling <nav>
Example:
<nav style="background:black; padding:10px;">
<a href="#" style="color:white; margin-right:10px;">Home</a>
<a href="#" style="color:white;">About</a>
</nav>
🚫 Common Mistakes
- Using
<nav>for random links ❌ - Putting everything inside
<nav>❌ - Not using it at all in navigation menus ❌
🧪 Mini Exercise
Create a page with:
A
<nav>bar containing 4 links:- Home
- About
- Services
- Contact
A page title below it
Style the navigation bar with background color