Basic Navigation in HTML

Any site with a respectable amount of content needs to have reliable site navigation. In this site, for example, the main navigation is divided as such:

  • A logo and site title that link back to the home.
  • Links to site pages, including a dropdown menu to modules.
  • Icons to outside resources.

blocks of the site navigation bar

This navigation is available at all times while browsing the site. The section navigation to the left however, only populates pages relative to its module, and is unavailable otherwise.

For your Instructable, you should consider two types of navigation:

  1. Site Navigation (set of links to pages on the site)
  2. Page Navigation (jumping to sections of long pages using href and id elements)

Let’s start by looking at the <nav> element, which will help you stay organized when structuring pages.