HTML <nav> – Semantic Navigation Guide

Introduction

In modern web development, semantic HTML plays a key role in making websites more accessible, maintainable, and SEO-friendly. Instead of using generic tags like <div>, semantic elements such as <nav>, <header>, <main>, and <aside> clearly describe the purpose of each section.

This tutorial focuses entirely on the <nav> element, which is used to define navigation areas in a webpage.

What is <nav>?

The <nav> element represents a section of navigation links.

👉 It is used for:

• Main menus
• Page navigation
• Section navigation
• Important links

✔ It tells browsers and screen readers:

"These links are for navigating the website"

Basic Example

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>