# Navs

In this module we will discuss the `<nav>` tag.

## File Location

For this module, you should be working in the following location:

```
     DotNetProjects
        └── HTMLCSSPreWork
            └── 1-HTML-Basics

                13-nav.html <---You should be here.

            └── 2-CSS-Basics
            └── 3-assets
```

## Description:

The `<nav>` tag is typically used to collect a set of navigation links. This is not intended to suggest that **every** link in your application should be encapsulated inside of a `<nav>`. The links collected in a `<nav>` are usually used to traverse through different pages in your application, usually in a navbar at the top of your application.

## Sample Code

Add the following sample code to your file:

```markup
<!DOCTYPE html>
<html>
<head>
    <title>Nav</title>
</head>
<body>
    <div>
        <nav>
          <a href="/1-HTML-Basics/">HTML</a>
          <a href="/2-CSS-Basics/">CSS</a>
        </nav>
    </div>

    <nav>
        <h1>Vertical Navigation Bar</h1>
            <ul>
                <li><a href="03-lists.html">Lists</a></li>
                <li><a href="05-images.html">Images</a></li>
                <li><a href="06-tables.html">Tables</a></li>
            </ul>
    </nav>

    <footer>
    <p>Copyright © 2006 The Example Company</p>
    <p><a href="about.html">About</a> -
    <a href="policy.html">Privacy Policy</a> -
    <a href="contact.html">Contact Us</a></p>
    </footer>

</body>
</html>
```

## Discussion

We've provided two examples above, but there are innumerable ways to accomplish this task, and the needs of the application may demand a specific solution. The first example is typical and produces a horizontally-aligned navbar. In the second example, we've specified that the browser should render the navbar vertically as an unordered list by using `<ul>` and `<li>` tags.

## Challenge

Try adding new links to your navbar. Experiment with the `href` attribute and try navigating to an outside webpage. Try adding an attribute to keep your webpage open and open the linked page in a new tab. Check out the code in [lesson 4](links) if you need a refresher.(hint: it's in the "target" portion of the lesson)

## Extra Reading:

[http://www.html-5-tutorial.com/nav-element.htm](http://www.html-5-tutorial.com/nav-element.htm)
