<nav> - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:nav

  1. HOME
  2. HTML CSS
  3. HTML Tag
  4. nav

Introduction

The nav element marks a section that contains links to other pages or to other parts of the same page.

nav element identifies the major navigation sections of a document.

The nav Element summary

Item Value
Element: nav
Permitted Parents: this element cannot be a descendant of the address element.
Local Attributes: None
Tag Style:Start and end tags
New in HTML5? Yes
Changes in HTML5 N/A
Style Convention nav { display: block; }

The following code shows the use of the nav element.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
   <head> 
      <title>Example</title> 
      <style>
h1, h2, h3 { background: grey; color: white; }
hgroup > h1 { margin-bottom: 0; margin-top: 0}
hgroup > h2 { background: grey; color: white; font-size: 1em;
margin-top: 0px; margin-bottom: 2px}
body > header  *, body > footer * { background:transparent; color:black;}
body > section, body > section > section,
body > section > section > section {margin-left: 10px;}
body > header, body > footer {
   border: medium solid black; padding-left: 5px; margin: 10px 0 10px 0;
}
body > nav { text-align: center; padding: 2px; border : dashed thin black;}
body > nav > a {padding: 2px; color: black}

      </style> 
   </head> 
   <body> 
      <header> 
         <hgroup> 
            <h1>CSS</h1> 
            <h2>by java2s.com</h2> 
         </hgroup> 
         <nav> 
            <h1>Contents</h1> 
            <ul> 
               <li>
                  <a href="#">Introduction</a>
               </li> 
               <ul> 
                  <li>
                     <a href="#">Layout</a>
                  </li> 
               </ul> 
               <li>
                  <a href="#">Color</a>
               </li> 
               <ul> 
                  <li>
                     <a href="#">Example</a>
                  </li> 
                  <li>
                     <a href="#">Resource</a>
                  </li> 
               </ul> 
            </ul> 
         </nav> 
      </header> 
      <nav>
          More Information: <!--   w w w  .  j a v a2 s.  c om-->
         <a href="#">Learn More About CSS</a> 
         <a href="#">Learn More About HTML</a> 
      </nav>  
   </body>
</html>

Related Tutorials