Chapter 21: Navigation Bars

Basic Navigation Bar

Navigation bars are essentially a list of links, so the ul and li elements are used to encase navigation links.

<ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a></li>
</ul>

HTML5 Navigation Bar

To make a navigation bar using the HTML5 nav element, encase the links within the nav tag.

<nav>
 <a href="#">Home</a>
 <a href="#">About</a>
 <a href="#">Contact</a>
</nav>