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.