Adding Navigation Blocks with nav element
Description
The nav
element denotes a section of the document that
contains links to other pages or to other parts of the same page.
This element identifies the major navigation sections of a document.
Example
The following code shows the use of the nav
element.
<!DOCTYPE HTML>
<html>
<body>
<header>
<hgroup>
<h1>H1</h1>
<h2>by java2s.com</h2>
</hgroup>
<nav>
<h1>Contents</h1>
<ul>
<li><a href="#fruitsilike">XML</a></li>
<ul>
<li><a href="#morefruit">HTML</a></li>
</ul>
<li><a href="#activitiesilike">CSS</a></li>
<ul>
<li><a href="#tritypes">Java</a></li>
<li><a href="#mytri">Javascript</a></li>
</ul>
</ul>
</nav><!-- w w w.java2s . com-->
</header>
<section>
<header>
<hgroup>
<h1 id="fruitsilike">Section h1</h1>
<h2>Section h2</h2>
</hgroup>
</header>
This is a test.
<section>
<h1 id="morefruit">Inner H1</h1>
This is a test.
<section>
<h1>More information</h1>
This is a test.
</section>
</section>
</section>
<section>
<header>
<h1 id="activitiesilike">Activities</h1>
</header>
<section>
<p>This is a test.</p>
<h1 id="tritypes">Java</h1>
This is a test.
<section>
<h1 id="mytri">Javascript</h1>
</section>
</section>
</section>
<nav>
More Information: <a href="http://java2s.com">Learn More About</a>
<a href="http://java2s.com">Learn More About</a>
</nav>
<footer id="mainFooter">
©2011, java2s.com. <a href="http://java2s.com">Visit</a>
</footer>
</body>
</html>