Create navigation in HTML5 document

Leave a Comment

Most websites have navigational links. The links, whether they are hyperlinks or buttons of some sort, are usually separated from the rest of the document through the use of a <div> element. Again, other than it being a division, it does not identify the section as being specifically used for navigation. In HTML5, you can now identify the section for navigational aids in the markup.

Structural element <nav></nav> can be used to create a container to hold navigational elements within the
entire HTML5 document or in any divisions within the document.
<header>
<span style="color:red;font-style:italic;">
Baking Cheesecakes
</span>
<hr>
</header>
<nav>
<a href="/Baking/" target="_blank">Baking</a> |
<a href="/ingredients/" target="_blank">Ingredients</a> |
<a href="/mixing/" target="_blank">Mixing</a> |
<a href="/toppings/" target="_blank">Toppings</a>
</nav>

<hgroup draggable="true">
<h1>Cheesecake Tips and Techniques</h1>
<h2>Professional Tips</h2>
</hgroup>
<aside style="font-size:larger;font-style:italic;color:blue;float:right;width:120px;">
To create a water bath, use a pan that will allow you to fill it with boiling water that
goes halfway up the spring form pan in which the cake is placed.
</aside>
<p>
When baking a cheesecake, it is important not to over bake it. You only want to bake it
until the middle has a slight wiggle, not until it is rock solid.
</p>
<p>It is important that you use a water bath, discussed at the right, to ensure even baking of
your cheesecake.</p>
<footer> &copy; 2012 - Better Made Cheesecakes - All rights reserved </footer>

As you can see, the navigational elements of your document now have their own easily identifiable
markup. They can be placed either for the whole HTML5 document, as shown here, or for any subdivision
of the document.

You are not limited to hyperlinks. Within the <nav></nav> container element, you can put any navigational aids that you wish.

A second tip is to not use a <nav></nav> container within the <footer> element. While not strictly forbidden, it could result in improper rendering.

0 comments:

Post a Comment