HTML Navigation Links: Mastering Website Navigation

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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/charset("`Character Encoding`") html/BasicStructureGroup -.-> html/lang_decl("`Language Declaration`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/LayoutandSectioningGroup -.-> html/nav_links("`Navigation and Links`") subgraph Lab Skills html/basic_elems -.-> lab-70800{{"`HTML Navigation Links`"}} html/charset -.-> lab-70800{{"`HTML Navigation Links`"}} html/lang_decl -.-> lab-70800{{"`HTML Navigation Links`"}} html/head_elems -.-> lab-70800{{"`HTML Navigation Links`"}} html/nav_links -.-> lab-70800{{"`HTML Navigation Links`"}} end

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>

Adding Navigation links using `<nav>` tag

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>

Adding Navigation links using `<a>` tag

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>

Summary

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.

HTML Navigation Links

Introduction

Skills Graph

Creating a basic HTML page

Adding Navigation links using `<nav>` tag

Adding Navigation links using `<a>` tag

Styling Navigation Menu

Final Page

Summary

Other HTML Tutorials you may like

HTML Navigation Links

Introduction

Skills Graph

Creating a basic HTML page

Adding Navigation links using <nav> tag

Adding Navigation links using <a> tag

Styling Navigation Menu

Final Page

Summary

Other HTML Tutorials you may like

Adding Navigation links using `<nav>` tag

Adding Navigation links using `<a>` tag