HTML Site Navigation

Your site navigation is important for your users! This is how they will find and visit the pages on your site. Ensuring that your navigation is properly coded and functional is important. There is a basic pattern that we will use when coding our site navigation. Your navigation will generally be added to your header, as it is repeated content, but can be placed outside of the header if necessary for your layout. Remember: you should only ever have one navigation element per page.

Site Navigation

As with the other links to resources that are a part of your project, your navigation should use relative links.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

In the example above, the about and contact pages are linked with relative links, assuming that we are currently on the Home page the project is organized correctly with all HTML files in the same folder and all files properly named with all lowercase letters. The link to the home page is set to a placeholder link, because if we are already on the Home page we don’t need a link there.

The outermost tags are the nav tags, because everything inside of them is part of the navigation.

<nav></nav>

The next nested pair of tags is an unordered list, as this helps accessibility by telling screen reader users how many links there are in this navigation (it will tell the user the number of list items. This is helpful when you can’t see the links and don’t want to choose one by mistake because you don’t know how many are there).

<ul></ul>

Inside of the unordered list is one list item for each of the links. These do not have any text inside of them, as the text has to be inside of the link tags in order to be clickable.

<li></li>

Finally, a link is coded inside of each list item, with the link text in between the opening and closing anchor tags. This is what the user actually clicks to view that resource. Again, these should use relative links, and they can also use link fragments to send the user not just to a specific page, but to a specific part of the page that has a given id, or just to a section with an id on the same page where they are.

<!-- A relative link to a page in the same folder as the page you are viewing -->
<a href="about.html">About</a>

<!-- A relative link to a specific section on a page in the same folder as the page you are viewing -->
<a href="menu.html#desserts">View Our Dessert Menu</a>

<!-- A relative link to a section on the page you are viewing -->
<a href="#desserts">Desserts</a>