HTML Navigation Links

HTMLBeginner

Introduction

The HTML <nav> tag is an important element for creating navigation links on a website. In this lab, you will learn how to use the <nav> tag to create a navigation menu on your website.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Creating a basic HTML page

First, let's create a new HTML page named index.html and add the basic HTML structure.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Website</title>
  </head>
  <body></body>
</html>

Now, let's create a navigation menu with the help of HTML <nav> tag. Create a <nav> element inside the <body> tag.

<body>
  <nav></nav>
</body>

Next, add some navigation links inside the <nav> tag using the HTML <a> tag.

<body>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact Us</a>
  </nav>
</body>

To make the navigation menu more visually appealing, let's add some CSS to it. Add the following styles to your HTML:

<head>
  <meta charset="UTF-8" />
  <title>My Website</title>

  <style>
    nav {
      background-color: #333;
      overflow: hidden;
    }

    a {
      float: left;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    a:hover {
      background-color: #ddd;
      color: black;
    }
  </style>
</head>

Final Page

Your final index.html page should look something like this:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Website</title>

    <style>
      nav {
        background-color: #333;
        overflow: hidden;
      }

      a {
        float: left;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }

      a:hover {
        background-color: #ddd;
        color: black;
      }
    </style>
  </head>
  <body>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Contact Us</a>
    </nav>
  </body>
</html>

In this lab, you learned how to use the HTML <nav> tag to create a navigation menu on your website. Creating navigation menus using the <nav> tag and styling them with CSS can help users easily navigate through your website and make it more visually appealing.