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">
    &#169;2011, java2s.com. <a href="http://java2s.com">Visit</a>
  </footer>
</body>
</html>

Click to view the demo





















Home »
  HTML CSS »
    HTML »




HTML Introduction
HTML Document
HTML Section
HTML Group Content
HTML Text Marker
HTML Table
HTML Form
HTML Embed