HTML Links and Anchor Tags – Internal, External, Download Links

Links are the soul of the web. HTML links, also known as anchor tags, help users move from one page to another within your site or to other websites.

In this post, you will learn, HTML links from basic syntax to advanced use cases like download links and email links.

Let’s Start!

Anchor Tags

Basic Syntax:

<a href="URL">Link Text</a>

<a href="URL">Link Text</a>

Explanation:

• <a> is the anchor tag.
• href stands for “Hypertext REFerence” and it is the attribute that holds the destination URL.
• Link Text is what the user clicks on.

Example:

<a href="https://www.google.com">Visit Google</a>

<a href="https://www.google.com">Visit Google</a>

➡️ This will appear as a clickable link: Visit Google

When clicked, it will take you to https://www.google.com.

Types of URLs in Anchor Tags

To use links effectively, you need to understand the absolute and relative URLs in anchor tags and the difference between them.

Absolute URL

An absolute URL contains the complete path, including the protocol (https://)

<a href="https://www.google.com">Go to Google</a>

<a href="https://www.google.com">Go to Google</a>

👉 Use absolute URLs when linking to external websites.

Relative URL

A relative URL specifies a path relative to the current page (or the root of the website). It does not include the domain name.

Examples:

<a href="about.html">About Us</a>
<!-- Link to the page within the same folder -->

<a href="pages/contact.html">Contact Page</a>
<!-- Link to the page within the subfolder -->

<a href="../index.html">Back to Home</a>
<!-- Link to the page within parent folder -->

<a href="about.html">About Us</a>
<!-- Link to the page within the same folder -->

<a href="pages/contact.html">Contact Page</a>
<!-- Link to the page within the subfolder -->

<a href="../index.html">Back to Home</a>
<!-- Link to the page within parent folder -->

👉 Use relative URLs for internal navigation within your site.

Internal Link

Used to link to other pages on the same website. This type of link uses relative URL.

<a href="/services.html">Our Services</a>

<a href="/services.html">Our Services</a>

External Link

Used to link to other websites. This type of link uses absolute URL.

<a href="https://www.google.com" target="_blank">Open Google</a>

<a href="https://www.google.com" target="_blank">Open Google</a>

Pro Tip: Always use target="_blank" for external links to open them in a new tab, and add rel="noopener noreferrer" for security and performance.

The target value specifies where the linked document will open. You can change it according to your requirements.

Common Target Values

• target="_blank"
• target="_self"
• target="_parent"
• target="_top"

🧱 target=”_blank”

Opens the link in a new browser tab or window (depending on browser settings).

Example:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Go to Example</a>

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Go to Example</a>

✅ Clicking this will open https://example.com in a new tab, and your current page stays open.

Security Tip:

When using _blank, you should also add rel="noopener noreferrer" to avoid security and performance issues:

Without rel="noopener", the new tab can use window.opener to access and control the original page, which can be a security risk, especially with untrusted links.

When to Use:

• For external links (so users don’t leave your site).
• To preserve the current page.
• When linking to documents, downloads, or external resources.

🧱 target=”_self”

Opens the link in the same browsing context (i.e., same tab, same frame). This is the default behavior of link if you don’t specify a target at all.

Example:

<a href="https://example.com" target="_self">Go to Example</a>

<a href="https://example.com" target="_self">Go to Example</a>

✅ Clicking this will replace the current page in the same tab with https://example.com.

When to Use:

• For internal navigation.
• When you don’t want to open a new tab.
• When working inside a single-page or frame-based application and want to remain in the current context.

🧱 target=”_parent”

Opens the link in the parent frame of the current frame.

Example:

If you have an iframe inside a page:

<!-- Parent page -->
<iframe src="child.html"></iframe>

<!-- Parent page -->
<iframe src="child.html"></iframe>

Inside child.html:

<a href="https://example.com" target="_parent">Go to Example</a>

<a href="https://example.com" target="_parent">Go to Example</a>

✅ Clicking this link will cause the parent page (the one that contains the iframe) to load https://example.com in the iframe’s place.

When to Use:

Use this when your page is embedded inside an iframe, and you want the link to open in the parent of the current frame.

🧱 target=”_top”

Opens the link in the full body of the window, breaking out of any frames.

Example:

If you are 2 or 3 levels deep in nested iframes:

<!-- Top-level page -->
<iframe src="level1.html"></iframe>

<!-- Top-level page -->
<iframe src="level1.html"></iframe>

<!-- Inside level1.html -->
<iframe src="level2.html"></iframe>

<!-- Inside level1.html -->
<iframe src="level2.html"></iframe>

Inside level2.html:

<a href="https://example.com" target="_top">Go to Example</a>

<a href="https://example.com" target="_top">Go to Example</a>

✅ Clicking this link will replace the entire browser window/tab with https://example.com, no matter how many frames deep you are.

When to Use:

Use this when you are in a nested iframe and want the link to break out entirely and load in the full window or tab.

Jump Links (Anchor to section of page)

Used to jump to a specific section on the same page using IDs.

Example:

<a href="#contact">Go to Contact</a>

<!-- Later in the same page -->
<h2 id="contact">Contact Us</h2>

<a href="#contact">Go to Contact</a>

<!-- Later in the same page -->
<h2 id="contact">Contact Us</h2>

👉 This is perfect for navigating long pages or creating a table of contents.

Download Link

Allow users to download files like PDFs or images directly.

Example:

<a href="brochure.pdf" download>Download Brochure</a>

<a href="brochure.pdf" download>Download Brochure</a>

✅ When the user clicks the link, the download attribute prompts the browser to download the file instead of opening it.

Link to an Email

You can also create a link that opens the user’s default email app with a pre-filled email address.

Example:

<a href="mailto:support@example.com">Email Support</a>

<a href="mailto:support@example.com">Email Support</a>

👉 This is useful for contact pages and support links.

Button Link

If you want a button-style link, there are two popular methods:

Method 1: Using an <a> tag with CSS

HTML

<a href="/signup.html" class="btn">Sign Up</a>

<a href="/signup.html" class="btn">Sign Up</a>

CSS

.btn {
  background-color: #007BFF;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px;
}

.btn {
  background-color: #007BFF;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px;
}

Method 2: Using <button> with JavaScript

<button onclick="location.href='home.html'">Go Home</button>

<button onclick="location.href='home.html'">Go Home</button>

• Not recommended for simple links
• Use <a> for navigation and <button> for actions like form submissions to follow semantic HTML best practices.

Quick Reference

Practice Task

Practice creating different types of links in a local HTML file. Try mixing internal, external, download, and email links to get a real feel for how each one works.