<nav> : Navigation Section element

by

Introduction

The <nav> element in HTML is used to define a section of a document that contains navigation links, typically used for navigating within the current document or to other documents. It’s intended to represent a major navigation block within the document’s structure.

Here’s a basic example of how the <nav> element can be used:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <nav>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

Output :

In this example:

  • The <nav> element contains a list of navigation links (<a> elements) wrapped in an unordered list (<ul>).
  • Each <a> element represents a link to a different section of the webpage or to other pages.
  • The navigation links typically allow users to quickly navigate to different sections of the current page or to other pages within the website.

It’s important to note that the <nav> element should only be used for major navigation blocks, such as the main menu or primary navigation links. Smaller or more contextual navigation elements should use other appropriate elements, such as <footer> for footer navigation or <aside> for sidebar navigation.

Using semantic HTML elements like <nav> helps improve the accessibility and clarity of the document structure, making it easier for assistive technologies and search engines to understand the content and its organization.

Leave a Comment