The design of the nav element represents a section of a document that contains navigation links. Its purpose is to identify the major navigation sections of a web page. This can link to other pages or to different parts of the same page (like anchors for a table of contents).
The <nav> element should be used for blocks of navigation. For example, site-wide navigation menus generally belong in a <nav> element. However, a list of links in the <footer> to terms and conditions or privacy policies might not necessarily require a <nav> element; the <footer> itself sufficient. Some developers might use <nav> for pagination or breadcrumb links, but the primary editor of the HTML5 specification suggests using it “whenever you would have used class=nav”.
The <nav> element can contain any flow content, not just hyperlinks. It commonly contains unordered lists (<ul>) or ordered lists (<ol>) of links, but it can also contain individual <a> elements directly.
Nav tag in html with example
Main Site Navigation
This is a primary use case for <nav>.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Example Page</title>
</head>
<body>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/about">About Us</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</body>
</html>An unordered list of links representing the main navigation of the website is correctly enclosed within the <nav> element. The <ul> and <li> elements are used within <nav> to structure the links. You can also have inline links within.
<nav>
<a href="/">Home</a> | <a href="/products">Products</a> | <a href="/about">About Us</a> | <a href="/contact">Contact</a>
</nav>Navigation within a <header>
It is the main navigation to be placed within the <header> of a document.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Example Page</title>
</head>
<body>
<header>
<h1>My Awesome Blog</h1>
<nav>
<ul>
<li><a href="/">Latest Posts</a></li>
<li><a href="/archives">Archives</a></li>
<li><a href="/categories">Categories</a></li>
</ul>
</nav>
</header>
</body>
</html>Navigation within an <article>
If an article is long, a <nav>element is used to provide a table of contents with links to different sections within the article.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Example Page</title>
</head>
<body>
<article>
<header>
<h2>Long Article Title</h2>
</header>
<nav>
<h3>Contents</h3>
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#section1">Section 1</a></li>
<li><a href="#conclusion">Conclusion</a></li>
</ul>
</nav>
<section id="introduction">
<h3>Introduction</h3>
<p>...</p>
</section>
<section id="section1">
<h3>Section 1</h3>
<p>...</p>
</section>
<section id="conclusion">
<h3>Conclusion</h3>
<p>...</p>
</section>
</article>
</body>
</html>Secondary Navigation
A page has additional navigation blocks that are not the primary site navigation. These can also be marked up with <nav>.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Example Page</title>
</head>
<body>
<aside>
<h3>Related Articles</h3>
<nav>
<ul>
<li><a href="/article1">Article One</a></li>
<li><a href="/article2">Article Two</a></li>
<li><a href="/article3">Article Three</a></li>
</ul>
</nav>
</aside>
</body>
</html>Improper Use of <nav>:
- Wrapping every set of links: Don’t use <nav> for small groups of links are part of the regular flow of content, like a few links at the end of a paragraph.
- Navigation within the <footer> (sometimes): While a <footer> contain links, wrapping them in a <nav> is unnecessary if those links are not a primary means of navigation for the site. The <footer> element itself provides semantic meaning.
By using <header> and <nav> correctly, you improve the semantic structure of your HTML, making it more accessible, better for SEO, and easier to understand and maintain. Remember to focus on the purpose of the content when deciding whether to use these semantic elements.