Skip to content
HTML Course

nav element

Intro

The <nav> element is used to wrap around navigation links.

A common use for the <nav> element is the navigation menu at the top of a web page. Another use case could be a table of contents for a long blog post.

A web page can have more than one <nav> element.

Steps

Create nav element

To create the <nav> element, type <nav> and then press Tab. Then press Enter, which should create a blank line in between the tags.

<nav>


</nav>

Create unordered list

Inside the nav element, type ul and press Tab to create the <ul> element. Then press Enter to create a blank line in between the tags.

<nav>
  <ul>


  </ul>
</nav>

Create list item elements

Inside the <ul> element, type li and press Tab to create a list item element. Then press Enter after the element to create a new line. Then repeat these steps again until you have 3 <li> elements, just like below.

<nav>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</nav>

Create anchor elements

Inside each <li> element, type a and press Tab to generate an anchor element inside each one. This should create both tags with an href attribute in the opening tags.

<nav>
  <ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</nav>

We want to link the Home, About, and Contact pages, so write these names inside each anchor element, just like the snippet below.

<nav>
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>

If you check the preview, you should see an unordered list with three links. However, the links don’t work yet.

To link to the home page, type a / inside the quotes. To link to the About and Contact pages, type the file names inside the quotes (about.html and contact.html).

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Click on the links in the live preview to see if they are working correctly. Also, note that the <nav> element won’t change the way the list or links look.

Final code

Check the last code snippet for the code that should be in between the body tags.