Problem Statement
What is the purpose of the <nav> element?
Explanation
The nav element defines a section of navigation links. It should contain major navigation blocks like the main site menu, table of contents, or breadcrumbs. Not all links need to be in a nav element, only significant navigation sections. For example, footer links do not always need nav tags. You can have multiple nav elements on a page for different navigation purposes. The nav element helps screen readers identify navigation areas, allowing users to skip to or past navigation quickly. It improves accessibility and helps search engines understand site structure. Using nav is semantically better than div class equals navigation and is considered a best practice for modern web development.
Code Solution
SolutionRead Only
<!-- Main navigation -->
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
<!-- Breadcrumb navigation -->
<nav aria-label="Breadcrumb">
<a href="/">Home</a> >
<a href="/products">Products</a> >
<span>Laptop</span>
</nav>
<!-- Table of contents -->
<nav aria-label="Table of Contents">
<h2>Contents</h2>
<ul>
<li><a href="#intro">Introduction</a></li>
<li><a href="#methods">Methods</a></li>
<li><a href="#results">Results</a></li>
</ul>
</nav>Practice Sets
This question appears in the following practice sets:
