Nav Element

The nav element is intended to contain site navigation elements. As a rule, this is an unordered list with a set of links.

You can use multiple nav elements on the same web page. For example, one navigation element is for navigating through pages on a site, and the other is for navigating within an html document.

Not all links need to be placed in the nav element . For example, some links may not present an associated navigation block, such as a link to a home page, a service license agreement, and similar links, which are often placed at the bottom of a page. As a rule, it is enough to define them in the footer element, and it is not necessary to use the nav element for them.

Let’s use the nav element to create a navigation menu:

<!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantic markup in HTML5</title>

            <li><a href="#">Home</a></li>
            <li><a href="/services">Services</a></li>
            <li><a href="/blog">Blog</a></li>
            <li><a href="/contacts">Contact Us</a></li>
            <h2>A story in two parts</h2>
                <li><a href="#part1">Part 1</a></li>
                <li><a href="#part2">Part 2</a></li>
            <section id="part1">
                <h2>Part 1</h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    It has been the industry...</p>
            <section id="part2">
                <h2>Part 2</h2>
                <p>There are many variations of passages of Lorem Ipsum available..</p>

        <p><a href="/license">License Agreement</a> |
            <a href="/about">About</a> |
            <a href="/donation">Donations</a>
        <p><small>&copy Copyright 2022 easywptutorials.</small></p>


In this case, two nav blocks are defined – one for inter page navigation and the other for in-page navigation.

It is not necessary to place all links in nav elements. So, in this case, a number of links are located in the footer element.