<nav> for navigation

The nav element marks a navigation section.

 
<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
body > nav { text-align: center; padding: 2px; border : dashed thin black;} 
body > nav > a {padding: 2px; color: black} 
</style> 
</head> 
<body> 
    <header> 
        <nav> 
            <h1>H1</h1> 
            <ul> 
                <ul> 
                    <li><a href="#">A</a></li> 
                    <ul> 
                        <li><a href="#">B</a></li> 
                    </ul> 
                    <li><a href="#">C</a></li> 
                <ul> 
                    <li><a href="#">D</a></li>
                    <li><a href="#">E</a></li> 
                </ul> 
            </ul> 
        </nav> 
</header> 
</body> 
</html>
Click to view this demo.

The nav Element Inside a header Element

 
<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
body > nav { text-align: center; padding: 2px; border : dashed thin black;} 
body > nav > a {padding: 2px; color: black} 
</style> 
</head> 
<body> 
<header> 
  <h1>My super HTML5 site</h1> 
  <nav> 
    <ul> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">News</a></li> 
       <li><a href="#">Contact us</a></li> 
    </ul> 
  </nav> 
</header> 
</body> 
</html>
Click to view this demo.
Home 
  HTML CSS Book 
    HTML  

nav:
  1. <nav> for navigation
  2. Multiple Navigation Groups in a Single nav Element
  3. Making a Basic Document Outline
Related: