search

Navs

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

hashtag
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

hashtag
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.

hashtag
Sample Code

Add the following sample code to your file:

<!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>

hashtag
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.

hashtag
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 if you need a refresher.(hint: it's in the "target" portion of the lesson)

hashtag
Extra Reading:

http://www.html-5-tutorial.com/nav-element.htmarrow-up-right

PreviousFootersNextiFrames

Last updated