Navigation is what steers you in the right direction; it gets you where you are going. Navigation is the more technical term maybe for what you know as a menu.

A menu on a website offers a list of where you can go on the site. It may take you to a page off the site, but most normally, it will take you to another place on the site, or even to a spot on the page.

Sometimes we put in what we call page jumps. Maybe at the bottom of a page it might have a place to click to jump back up to the top of the page. Or you might have a menu link that jumps you down to the reviews of an item. Can you picture those types of links on a page? They don’t open a new page; they just move to a new spot on the page you are on.

To do that we’re going to need links and IDs. I’ve done lessons on both, so if you aren’t sure what I am talking about, go back to lessons 7 and 8.

There is a <nav> tag for navigation. A good reason to use it even though it’s not necessary is that people who use the talking voice on the computer to read the screen to them will find it more useful if the computer can figure out what those links are for. If you have them in the navigation part of the page, then the browser knows that it’s the menu. It’s just one more way to organize your page. Even though most people don’t have a computer reading the screen to them, it doesn’t hurt us to use organizing tags that might help those who need to, like the blind.

<h1>My Travels</h1> <nav> <h2>Menu</h2> <a href="#destinations">Destinations</a> <a href="#gallery">Gallery</a> </nav> <div id="destinations"> <h3>Macedonia</h3> <h3>Germany</h3> <h3>Turkey</h3> <h3>Poland</h3> </div> <div id="gallery"></div>

We’ll add images to the gallery in the next lesson.

Watch the video of this lesson to see how it looks in the browser.