Back to Week 3 page »

Navigation Markup

Virtually all websites have some form of navigation on them.

HTML markup for navigation generally follows a very specific pattern.

Take for example, the current Apple home page.

Screen shot of the Apple home page
A Screen shot of the Apple home page

There is a main navigation on the top of the page with links to the following pages: Mac, iPad, iPhone, Watch, TV, Music, Support.

Navigation Lists

We traditionally mark up navigation like this using lists. This makes sense semantically because the navigation is essentially a list of links.

<ul>
   <li>Mac</li>
   <li>iPad</li>
   <li>iPhone</li>
   <li>Watch</li>
   <li>TV</li>
   <li>Music</li>
   <li>Support</li>
</ul>

Once we add the appropriate links with titles it starts to look more like this:

<ul>
   <li><a href="mac.html" title="Mac computers">Mac</a></li>
   <li><a href="ipad.html" title="Learn about iPads">iPad</a></li>
   <li><a href="iphone.html" title="Learn about iPhones">iPhone</a></li>
   <li><a href="watch.html" title="Learn about Apple Watch">Watch</a></li>
   <li><a href="tv.html" title="Learn about Apple TV">TV</a></li>
   <li><a href="music.html" title="Learn about Apple Music">Music</a></li>
   <li><a href="support.html" title="Get support">Support</a></li>
</ul>

nav Element

HTML5 includes a structural element called nav. This element is designed to designate a primary group of navigation on a page.

<nav>
   <ul>
      <li><a href="mac.html" title="Mac computers">Mac</a></li>
      <li><a href="ipad.html" title="Learn about iPads">iPad</a></li>
      <li><a href="iphone.html" title="Learn about iPhones">iPhone</a></li>
      <li><a href="watch.html" title="Learn about Apple Watch">Watch</a></li>
      <li><a href="tv.html" title="Learn about Apple TV">TV</a></li>
      <li><a href="music.html" title="Learn about Apple Music">Music</a></li>
      <li><a href="support.html" title="Get support">Support</a></li>
   </ul>
</nav>

Back to Week 3 page »