Links and Navigation in HTML

In Ancient Egypt, pyramids contained hundreds of corridors, secret passages, and hidden chambers. Every door led somewhere - to a burial chamber, treasury, or another corridor. Links in HTML work exactly the same way! They are doors that lead the user from one page to another, from one section to another, and even to an email or phone number. Mohamed says: "Without links, the internet would be like a pyramid without doors - beautiful, but locked tight!"

The <a> Tag - Pyramid Doors

Links in HTML are created using the <a> tag (from "anchor"). The most important attribute is href (hypertext reference), which indicates where the link leads:

1<a href="https://en.wikipedia.org/wiki/Giza_pyramid_complex">Pyramids of Giza</a>

The text between <a> and </a> is the link content - what the user sees and clicks. The browser by default displays it as blue, underlined text.

Link Structure:

1<a href="DESTINATION_ADDRESS">Text visible to the user</a>

• href - attribute with the address where the link leads (page URL, file, email...)
• Content between the tags - what we click

URL Addresses - Absolute and Relative

Just as in Egypt you can give an address two ways ("Cairo, Pyramid Street 15" or "two houses down"), in HTML we have two types of addresses:

Absolute Address (Full Path)

Contains the complete address of the page, including the protocol (https://) and domain. Use it for linking to external pages:

1<!-- Link to external page -->
2<a href="https://www.britannica.com/place/ancient-Egypt">Encyclopedia about Egypt</a>
3
4<!-- Link to specific subpage -->
5<a href="https://en.wikipedia.org/wiki/Tutankhamun">Tutankhamun on Wikipedia</a>

Relative Address (Relative Path)

Points to a page within the same website. It doesn't contain the domain - the browser knows to look for the file on the same server:

1<!-- Link to a file in the same folder -->
2<a href="about.html">About me</a>
3
4<!-- Link to a file in a subfolder -->
5<a href="pages/gallery.html">Photo Gallery</a>
6
7<!-- Link to a file in the parent folder -->
8<a href="../index.html">Home Page</a>

Opening in a New Tab - target and rel

By default, clicking a link opens the page in the same tab. But sometimes you want the link to open in a new tab - e.g., when linking to an external source and you don't want the user to leave your page:

1<a href="https://www.metmuseum.org" target="_blank" rel="noopener noreferrer">
2  Metropolitan Museum - Egyptian Collection
3</a>

Attribute explanation:

• target="_blank" - opens the link in a new browser tab
• rel="noopener noreferrer" - important for security! Prevents the new page from accessing your page. Always add this attribute together with target="_blank"

Mohamed advises: "When linking to a foreign world, always use rel="noopener noreferrer" - it's like closing the door behind you so nobody slips into your pyramid!"

Email and Phone Links - Pharaoh's Messengers

Email Link (mailto:)

The mailto: prefix in the href attribute creates a link that opens the default email program:

1<a href="mailto:mohamed@pyramids.eg">Write to Mohamed</a>
2
3<!-- With a subject line -->
4<a href="mailto:mohamed@pyramids.eg?subject=Question%20about%20pyramids">
5  Send a question about pyramids
6</a>

Spaces in the address are written as %20.

Phone Link (tel:)

The tel: prefix creates a link that on mobile phones launches the calling app:

1<a href="tel:+48123456789">Call: +48 123 456 789</a>

These links are especially useful on mobile pages - the user can call or write an email with a single click!

Anchor Links - Navigation Within a Page

Imagine a long scroll of papyrus with many chapters. Instead of scrolling through the entire scroll, you'd like to jump directly to a specific chapter. Anchor links allow navigation within the same page.

Step 1: Give the Target Section an id

The id attribute is a unique element identifier - like a chamber number in a pyramid:

1<h2 id="discoveries">My Discoveries</h2>
2<p>Content about discoveries...</p>
3
4<h2 id="contact">Contact</h2>
5<p>Content about contact...</p>

Step 2: Create a Link with # and the id Name

1<a href="#discoveries">Go to discoveries</a>
2<a href="#contact">Go to contact</a>

Clicking such a link scrolls the page to the element with the corresponding id. The # sign tells the browser: "look for an element with this id on this same page."

Back to Top

A popular technique - a link at the bottom of the page that returns to the top:

1<!-- At the top of the page -->
2<h1 id="top">My Egypt Page</h1>
3
4<!-- Somewhere at the bottom of the page -->
5<a href="#top">Back to top</a>

Complete Navigation Example

Let's combine all types of links into one example:

1<h1 id="top">Egyptian Portal</h1>
2
3<!-- Internal navigation -->
4<p>
5  <a href="#history">History</a> |
6  <a href="#gallery">Gallery</a> |
7  <a href="#contact">Contact</a>
8</p>
9
10<h2 id="history">History of Egypt</h2>
11<p>Ancient Egypt is one of the oldest civilizations in the world...</p>
12
13<h2 id="gallery">Gallery</h2>
14<p>More photos on
15  <a href="https://unsplash.com/s/photos/egypt" target="_blank" rel="noopener noreferrer">
16    Unsplash
17  </a>
18</p>
19
20<h2 id="contact">Contact</h2>
21<p>
22  <a href="mailto:info@egyptian-portal.com">Write to us</a><br>
23  <a href="tel:+48111222333">Call us</a>
24</p>
25
26<a href="#top">Back to top</a>

Summary

Mohamed summarizes: "Links are the backbone of the internet - without them, pages would be isolated islands. Remember the key rules:"

• <a href="URL"> - creates a link (anchor)
• Absolute addresses (https://...) - for external pages
• Relative addresses (about.html) - for pages on the same website
• target="_blank" + rel="noopener noreferrer" - safely opening in a new tab
• mailto: - email link, tel: - phone link
• href="#id" - anchor links to sections on the same page
• The id attribute - unique element identifier

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Links in HTML</title>
6</head>
7<body>
8    <h1 id="top">Links and navigation</h1>
9
10    <nav>
11        <a href="#section1">About Egypt</a> |
12        <a href="#section2">Monuments</a> |
13        <a href="#contact">Contact</a>
14    </nav>
15
16    <hr>
17
18    <h2 id="section1">About Ancient Egypt</h2>
19    <p>Egypt is a fascinating civilization.
20       <a href="https://en.wikipedia.org/wiki/Ancient_Egypt" target="_blank" rel="noopener noreferrer">Read more on Wikipedia</a>
21    </p>
22
23    <h2 id="section2">Most important monuments</h2>
24    <p>Pyramid of Cheops, Sphinx, Temple of Karnak.</p>
25
26    <h2 id="contact">Contact</h2>
27    <p>Email: <a href="mailto:mohamed@pyramids.eg">mohamed@pyramids.eg</a></p>
28    <p>Phone: <a href="tel:+20123456789">+20 123 456 789</a></p>
29
30    <p><a href="#top">↑ Back to top</a></p>
31</body>
32</html>