Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to Structure your Web Page with HTML5 Nav Tag

In this article I will discuss about the HTML 5 nav tag (navigational tag) which provides more structured navigational links and organize the links on page with different tags.

Introduction:

In this article I will discuss about HTML 5 <nav> tag. <nav> is newly introduced in HTML 5. <nav> tag helps designer to design a page in more structured way and links are more organized and grouped together.

Description:

<nav> tag stands for navigational tag which provides more structured navigational links. The links should be placed inside the <nav> tag by in some structural way. The <nav> tag is supported by latest version of all major browsers, while the old versions can have problem.

<nav> Tag:

<nav> tag provide a structure to organize links, To understand better lets use this tag and write some examples. The below code have a simple <nav> structure. This structure contains the list of email service providers.

Listing 1: Script to use <nav> Tag

<!DOCTYPE html>
<html>
<head>
    <title>MrBool.com Tutorials - Nav Tag</title>
</head>
<body>
    <nav>
  <a href="http://gmail.com">Gmail</a> |
  <a href="http://Hotmail.com">Hotmail</a> |
  <a href="http://mail.yahoo.com">Yahoo Mail</a> |
  <a href="http://rediffmail.com">Rediffmail</a> 
</nav>
</body>
</html>


 
figure is output of <nav> tag - A simple structuring of links

Figure 1: Above figure is output of <nav> tag - A simple structuring of links

You can see in above output, it look like normal links, but we grouped it inside the <nav> tag and can apply common properties to all the links.

Nav Tag - Structure:

After understanding the simple use of <nav> tag, Let’s explore the more structured way to arrange the links using the <nav> tag. Let’s expand the previous program and make it more structured. First add a paragraph with some header links. You can also add our <nav> tag with a heading and followed by email service providers links. Now you can add the <article> tag to write you content. Note that article tag is also HTML 5 tag and used to write content on page with more structured way. Now you can add a footer with copyright info and some links like about us, contact us etc.

Listing 2: Script to <nav> tag in structured page

<!DOCTYPE html>
<html>
<head>
    <title>MrBool.com Tutorials - Nav Tag</title>
</head>
<body>
    <header>
        <h1>
            Mrbool Content Page</h1>
        <p>
            <a href="http://mrbool.com/">Home</a> - <a href="http://mrbool.com/course/">Course</a>
             <a href="http://mrbool.com/articles/listcomp.asp">Articles</a></p>
        <nav>
            <h1>
                Email Service Providers:</h1>
            <ul>
                <li><a href="http://gmail.com">Gmail</a> </li>
                <li><a href="http://Hotmail.com">Hotmail</a></li>
                <li><a href="http://mail.yahoo.com">Yahoo Mail</a></li>
                <li><a href="http://rediffmail.com">Rediffmail</a> </li>
            </ul>
        </nav>
    </header>
    <article>
        <p>
            Content Section of mail Service provider...</p>
    </article>
    <footer>
        <p>
            Copyright © 2012 The HTML 5 Social Company</p>
        <p>
            Mrbool.com - <a href="http://mrbool.com/creditos/?p=6">Buy Credits</a> - <a href="http://mrbool.com/portal/contact.asp">
                Contact Us</a></p>
    </footer>
</body>
</html>

 
above figure is output of complete page with <nav> tag

Figure 2: The above figure is output of complete page with <nav> tag

<nav> Tag - More on Structure:

Let’s discuss another example of page structuring buy using the <nav> tag. As you can see in below example, the header part is also having the <nav> tag and inside this there is unsorted list. After that there is a <article> tag which contains <header>, <section> and then <footer>. Each of these tags can have the <nav> tags and include the links. <header>, <section> and <footer> tags are new to you and I will discuss these tags in coming articles.

Listing 3: <nav> Tag different structure

<!DOCTYPE html>
<html>
<head>
    <title>MrBool.com Tutorials - Nav Tag</title>
</head>
<body>
    <h1>
        Mrbool Content Page</h1>
    <nav>
        <ul>
            <li><a href="http://mrbool.com/">Home</a></li>
            <li><a href="http://mrbool.com/course/">Course</a></li>
            ...more...
        </ul>
    </nav>
    <article>
        <header>
            <h1>
                Primary Email Service Providers</h1>
            <nav>
                <ul>
                    <li><a href="http://gmail.com">Gmail</a> </li>
                    <li><a href="http://Hotmail.com">Hotmail</a></li>
                    ...more...
                </ul>
            </nav>
        </header>
        <section id="Sec">
            <h1>
                Secondary Email Service Providers</h1>
            <p>
                ...more...</p>
        </section>
        <footer>
            <p>
                Mrbool.com - <a href="http://mrbool.com/creditos/?p=6">Buy Credits</a> - <a href="http://mrbool.com/portal/contact.asp">
                    Contact Us</a></p>
        </footer>
    </article>
    <footer>
        <p>
            <small>Copyright © 2012 The HTML 5 Social Company</small></p>
    </footer>
</body>
</html>
figure is output of page structuring by using article tag and nav tag
Figure 3: Above figure is output of page structuring by using <article> tag and <nav> tag

Conclusion:

<nav> tag is introduced to organize the links on page with different tags. Explore the examples given in this article and apply it on your web page. Please comment at mrbool site for your questions.



I am having total 7+ years of experience in developing applications using C#, VB.NET, ASP.NET, Silverlight, WCF, SQL Server and Oracle. I am holding a M.Tech degree in Intelligent systems. For more information, visit my Linkedin p...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login