Navigating Around the Nav Element

Today, we'll study the nav element in HTML5. The nav element is a grouping of links (external or internal to the page) that are used to help users navigate around the site. Not all links would qualify as ones you should use inside a nav element; if the links are a group of favorite game sites for example, then it would not be appropriate to use the nav element.

The nav element can be placed inside the header element (which was discussed in an earlier article), but it is not a requirement. For example, a website can have a header navigation area and a side navigation area. The side navigation does not have to be part of the header. It is also not necessary to have the navigation in list form, although this is a fairly typical use case.  In some situations, navigational links are introduced in a paragraph format.

In the sample below, there are three different navigation areas.  The first one is the top navigation, placed inside a header element. The second one is a side navigation area. The third navigation area is a paragraph with navigational links.

<header>
<nav class="topnav">  
    This is the top navigation.
        <ul>
        <li><a href="/about">About</a></li>
        <li><a href="/press">Press Releases</a></li>
        <li><a href="/faqs">FAQs</a></li>
    </ul>
</nav>
</header>
<nav class="side">
    Side Navigation
    <ul>
        <li><a href="prod1.html">Product 1</a></li>
        <li><a href="prod2.html">Product 2</a></li>
        <li><a href="prod3.html">Product 3</a></li> 
    </ul>
</nav>
<nav class="justdescribenav">
    Unlike my cousin top navigation and side navigation, I will NOT be a list menu!
I will be different and I will just tell you about our different
sections. On the <a href="/about">About </a> section, you
will learn how this site has started. To find out more on what
is happening, please go to the <a href="/press">Press Releases</a>.
If you have any questions, please check out our <a href="/faqs">FAQs</a> section.
</nav>


Styling

Like the other HTML5 semantic elements, the nav element has no inherent style; you can apply styles to it like you would any other element. In the sample style below, you can see that the style is applied to all three nav elements. Then each one is styled slightly differently to suit its purpose.

<style>
    nav {float: left; border: dashed 4px;}

    nav.topnav {width: 100%; height: 100px;}
    nav.topnav ul{ list-style: none; position: relative; }
    nav.topnav ul li { float: left; border: double 1px; margin: 5px;}
 
    nav.side { width: 250px; margin: 14px; float: left;}
    nav.side ul li {float: none;}
 
    nav.justdescribenav {  float: left; width: 100%;}
</style>