Basic Navigation in HTML
As we have discussed already in this class, all websites need to have reliable site navigation. In this site, for example, the primary navigation elements include:
- A logo and site title that link back to the homepage in the upper left-hand corner.
- Module drop-down menu.
- Link to the FAQ section where you can easily access important information, such as the instructor email.
- Link to the about section where you can learn more about the history of the course and former instructors.
This navigation is available at all times while browsing the site, so it makes up this website’s persisent navigation. The primary navigation to the left however, only populates pages relative to its module, and lists out the subsections of each module section.
For the 3-page website you create this week, you should consider both types of navigation. There is some overlap between the two:
- Persistent Navigation (the navigation elements that appear on every page of your website, such as your website logo)
- Primary Navigation (links to the main sections of your website and jumping internally to different spots within a long page, making use of
hrefandidattributes)
Let’s start by looking at the <nav> element which will help you stay organized when structuring pages.