What you'll learn
Links are what make the web a web — they connect pages to each other and to the wider internet. In this module you'll master the anchor element, understand the crucial difference between absolute and relative URLs, and build your first navigation menu.
By the end you'll be able to:
- Create links with the
<a>element andhref - Choose correctly between absolute and relative URLs
- Link to sections within a page using fragments
- Open new tabs safely and create email/phone links
- Build a semantic navigation menu
The anchor element
A link is an anchor — the <a> element. Its most important attribute is href (hypertext reference), which holds the destination. The text between the tags is what the user clicks:
<!-- An external link -->
<a href="https://developer.mozilla.org">Visit MDN</a>
<!-- A link to another page in your own site -->
<a href="about.html">About us</a>
<!-- Jump to a section on the same page -->
<a href="#contact">Skip to contact</a>
<!-- Open in a new tab, safely -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
Open in a new tab
</a>
<!-- Email and phone links -->
<a href="mailto:hi@example.com">Email me</a>
<a href="tel:+15551234567">Call us</a>Absolute vs relative URLs
Where a link points depends on the kind of URL you give it. Getting this right is one of the most common early stumbling blocks, so it's worth understanding clearly:
| Type | Example | Points to |
|---|---|---|
Absolute | https://site.com/page | A full address — usually another website |
Root-relative | /blog/post.html | A path from your site's root folder |
Document-relative | about.html | A file in the same folder as the current page |
Parent folder | ../images/logo.png | Up one folder, then into images/ |
Tip
Fragment links
A fragment link jumps to a specific spot on a page. Give an element an id, then link to it with # plus that id. This powers "back to top" buttons and in-page tables of contents:
<a href="#contact">Go to contact</a>
<!-- ...further down the page... -->
<h2 id="contact">Contact us</h2>Note
href="#" jumps to the top of the page. And the same technique works across pages — about.html#team opens about.html and scrolls straight to the element with id="team".New tabs & special links
Adding target="_blank" opens a link in a new tab. When you do, always pair it with rel="noopener noreferrer" — this closes a security and performance loophole where the new page could otherwise gain a reference back to yours. Two other handy schemes:mailto: opens the user's email app, and tel: starts a phone call on mobile.
A navigation menu
A site's main navigation is conventionally a list of links wrapped in a <nav>element. Using a <ul> of links is the accepted, accessible pattern — screen readers announce it as a navigation region with a known number of items:
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</nav>Recap & quick check
Key takeaways
- Links are the <a> element; the href attribute holds the destination.
- Use relative URLs between your own pages and absolute URLs to link to other sites.
- Fragment links (#id) jump to an element with a matching id, on this page or another.
- target="_blank" opens a new tab — always add rel="noopener noreferrer" with it.
- Build navigation as a <ul> of links inside a <nav> element.
Quick check
1. Which attribute sets a link's destination?
2. You're linking from index.html to about.html in the same folder. Best href?
3. What does href="#team" do?
4. What should accompany target="_blank"?
5. How should you mark up a main navigation menu?
Your pages can talk to each other now. Next we bring them to life visually with images and multimedia.