Summary - Navigation menu

Build a simple navigation menu with internal and external links.

Links tie a site together

In this group you saw the core tools of links: the <a> tag, the address with href, absolute and relative URLs, in-page #id jumps, opening control with target and rel, and finally the mailto: and tel: forms.

Now it is time to bring them together in a navigation menu. A menu is the most used link set on a site; written well, it guides consistently on every page.

Exercise Build a navigation menu.

Build a top navigation menu for a cafe site. The menu should have four links: home (index.html), menu (menu.html), contact (contact.html) and an external archive (https://archive-library.example, opened in a new tab). Choose your own anchor text.

Show example solution

<h1>Galata Cafe</h1>
<a href="index.html">Home</a>
<a href="menu.html">Menu</a>
<a href="contact.html">Contact</a>
<a href="https://archive-library.example" target="_blank">Archive</a>

Exercise Add a contact link to the menu.

Add an email link to the menu below: mailto:reservation@cafe-guide.com. The anchor text should be "Reservation".

Show example solution

<a href="index.html">Home</a>
<a href="menu.html">Menu</a>
<a href="mailto:reservation@cafe-guide.com">Reservation</a>

Navigation is now yours

In this summary you combined the link tools in a navigation menu: paths to internal pages with relative addresses, to external pages with target and rel, and to email with mailto: all met in one menu.

A good menu is short, consistent and in the same place on every page. In the next group you will enrich pages by adding images.

Test yourself

Match concepts to their meaning.

href

Link address
id

In-page target name
target

Where it opens
rel="noopener"

New tab safety
tel:

Phone call
What should be added to open an external link safely in a new tab?
- Only target="_blank"
- Only rel="noopener"
- Both target="_blank" and rel="noopener"
- Only href
Show answer

Both target="_blank" and rel="noopener" — Correct. target opens a new tab, rel adds safety; write both.

Next lesson: Unordered lists

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies