Links
The <a> element — the most important element that makes the web a "web" of connected pages.
1. Introduction
The World Wide Web gets its name from the fact that pages are linked together like a web. Links are what make navigation possible — without them, every page would be an island.
The anchor element <a> is one of the most frequently used HTML elements. It creates hyperlinks — clickable text (or images) that navigate the user to another location.
2. Theory
The Anchor Element
The basic syntax of a link:
<a href="URL">Link text that the user sees</a>href stands for Hypertext Reference — it is the destination URL or file path.
Types of Links
1. External Links (other websites)
<a href="https://www.google.com">Visit Google</a>Use the full URL including https://. Opens in the same tab by default.
2. Internal Links (other pages in your site)
<!-- Link to a file in the same folder -->
<a href="about.html">About Us</a>
<!-- Link to a file in a subfolder -->
<a href="pages/contact.html">Contact</a>
<!-- Link to a file in a parent folder -->
<a href="../index.html">Home</a>3. Page Anchor Links (jump to a section)
<!-- The link -->
<a href="#section-about">Jump to About</a>
<!-- The target -- must have a matching id -->
<h2 id="section-about">About</h2>4. Email Links
<a href="mailto:hello@example.com">Email us</a>Opens the user's default email application.
5. Phone Links
<a href="tel:+441234567890">Call us</a>On mobile devices, tapping this starts a phone call.
Important Link Attributes
| Attribute | Value | Effect |
|---|---|---|
href | URL or path | The destination — required |
target | "_blank" | Opens link in a new tab |
target | "_self" | Opens in same tab (default) |
rel | "noopener noreferrer" | Security best practice when using target="_blank" |
title | Any text | Tooltip shown on hover |
download | filename | Download the linked file instead of opening it |
Relative vs Absolute Paths
| Type | Example | When to Use |
|---|---|---|
| Absolute | https://example.com/page.html | Linking to external sites |
| Relative | about.html or ../images/photo.jpg | Linking to files within your own site |
Relative paths are relative to the current file's location. ../ means "go up one folder".
3. Real World Example
Navigation menus are lists of links. Every "Home", "About", "Contact" link you have ever clicked is an <a> element. Footer links, "Read more" buttons, social media icons — all anchors.
The Google search results page is nothing but a list of links. Understanding the <a> element is understanding how the web works.
4. Code Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Links Demo</title>
</head>
<body>
<h1>Types of Links</h1>
<!-- External link -- opens in new tab -->
<p>Search the web with <a href="https://www.google.com" target="_blank" rel="noopener noreferrer">Google</a>.</p>
<!-- Internal link -- same folder -->
<p>Go to the <a href="about.html">About page</a>.</p>
<!-- Anchor link -- jump to section on same page -->
<p><a href="#contact">Skip to Contact section</a></p>
<!-- Email link -->
<p>Questions? <a href="mailto:hello@mysite.com">Send us an email</a>.</p>
<!-- Phone link -->
<p>Call us: <a href="tel:+441234567890">+44 123 456 7890</a></p>
<!-- Download link -->
<p><a href="files/brochure.pdf" download="company-brochure">Download our brochure</a></p>
<!-- Navigation menu using a list of links -->
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<!-- Target section for anchor link above -->
<h2 id="contact">Contact</h2>
<p>You can reach us at the email or phone above.</p>
</body>
</html>5. Code Breakdown
| Code | What It Does |
|---|---|
href="https://www.google.com" | Full URL with protocol — links to external site |
target="_blank" | Opens the link in a new browser tab |
rel="noopener noreferrer" | Security: prevents the new page from accessing your page. Always include with target="_blank" |
href="about.html" | Relative path — links to about.html in the same folder |
href="#contact" | Anchor link — the # symbol means "find an id matching this on the same page" |
id="contact" | The target of the anchor link — the page scrolls to this element |
href="mailto:..." | Opens the default email app with the address pre-filled |
href="tel:..." | Starts a phone call on mobile devices |
download="name" | Downloads the file. The value sets the saved filename |
6. Common Mistakes
Without these security attributes, the linked page can access your page via window.opener. Always pair target="_blank" with rel="noopener noreferrer".
<a href="#">Click me</a> scrolls the page to the top when clicked. For buttons that run JavaScript, use a <button> element instead, or use href="javascript:void(0)" as a temporary placeholder.
Bad: <a href="...">Click here</a>
Good: <a href="...">Download our 2024 Annual Report</a>
Screen readers read link text aloud. "Click here" tells the user nothing. Describe where the link goes.
If your file is in docs/01-html/ and you want to link to index.html at the root, you need ../../index.html (go up two folders). Getting this wrong causes broken links.
7. Best Practices
8. Practice Exercise
Create links-practice.html. Build a simple "Resources" page that includes:
- A navigation
<nav>with 3 internal links pointing to sections on the same page (using anchor links with#id) - A section with 3 external links (any real websites) — all opening in new tabs with proper security attributes
- A section with a mailto and a tel link
- Each section must have a matching
idso the navigation anchor links work
9. Assignment
Add navigation to your About Me page from the earlier assignment:
- Create a second page:
contact.htmlwith your (made up) contact details - On
about-me.html, add a<nav>with links to both pages - On
contact.html, add the same navigation and a "Back to About" link - Add a
mailto:link on the contact page - Test that clicking between the two pages works correctly
10. Interview Questions
Q1: What is the href attribute in an anchor tag?
Answer: href stands for Hypertext Reference. It specifies the destination of the link — a URL for external sites, a relative path for internal pages, #id for same-page anchors, mailto: for email, or tel: for phone calls.
Q2: What is the difference between absolute and relative URLs?
Answer: An absolute URL includes the full path: https://example.com/page.html. A relative URL is relative to the current file's location: ../about.html. Use absolute URLs for external sites, relative URLs for internal pages.
Q3: What does target="_blank" do and what security precaution should you take?
Answer: target="_blank" opens the linked page in a new browser tab. The security precaution is to always add rel="noopener noreferrer". Without it, the new page has access to the opener page via window.opener, which can be exploited.
Q4: How do you create a link that jumps to a specific section on the same page?
Answer: Give the target element an id attribute: <h2 id="about">. Then link to it with a hash: <a href="#about">Go to About</a>. When clicked, the browser scrolls to the element with that id.
Q5: Why is descriptive link text important?
Answer: Screen readers read link text aloud to visually impaired users. "Click here" provides no information about the destination. Descriptive text like "Download the 2024 Annual Report" tells users exactly what they will get. It also helps SEO — search engines use link text to understand what the linked page is about.