Qarpeo LogoInstitute

<nav>

The HTML <nav> element indicates a section containing navigation links, organizing and grouping menus to enhance accessibility and the overall user experience on a webpage.

<nav> tag

The <nav> element represents a section containing navigation links, such as menus, tables of contents, and indexes, that aid navigation within or between documents.

<nav> Demo

index.html
<nav>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About Us</a></li>
    <li><a href="/services">Our Services</a></li>
    <li><a href="/contact">Contact Us</a></li>
  </ul>
</nav>

Key Points

  • Purpose: Defines a section containing navigation links to enhance website structure and accessibility.
  • Usage: Commonly used for primary site navigation menus or sets of links that facilitate navigation.
  • Browser Support: Fully supported in modern browsers.

Example with Styling

index.html
<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>

Default CSS Settings

By default, most web browsers render the <nav> element using the following styles:

style.css
nav {
  display: block;
}

See also

  • Other section-related elements:

<body> <article> <section> <aside> <hgroup> <header> <footer> <address>

  • Sections and outlines of an HTML5 document.

Conclusion

The <nav> tag is used to define a section of navigation links within a webpage, typically found in menus, tables of contents, or indexes, to aid users in navigating the website or document. It enhances the website structure and accessibility by grouping important links together. Modern browsers fully support the <nav> tag, making it a reliable choice for navigation elements. For improved user experience, the <nav> tag can be styled using CSS to customize the appearance of the links and the layout of the navigation section.

<marquee>

The HTML <marquee> element is deprecated and was used to create scrolling text or images on a webpage; contemporary methods now utilize CSS animations for similar effects.

<section>

The HTML <section> element represents a thematic block of content, usually containing its own heading, used to organize and divide a document into related segments.