Anchor Tags in HTML

Almost every link on the web starts with: <a>. That tiny element is called the anchor tag, and it’s the reason the web works the way it does. Without it, every page would be an island, impossible to navigate or connect to anything else.

In this tutorial, you’ll learn how anchor tags in HTML work from the ground up. We’ll cover absolute URLs, relative URLs, in-page section anchors, the mailto HTML link, the tel HTML link, download links, and the practices that make your links clean, accessible, and SEO-ready.

01What Is an Anchor Tag in HTML?

The anchor tag is the <a> element. It creates a hyperlink, which is a piece of content that takes the user somewhere when clicked. That destination could be another page, a section on the same page, an email address, or a phone number.

The name “anchor” has two layers of meaning. It anchors content to a destination (the link target), and it can also anchor a spot on a page that other links can point to. You’ll see both uses clearly in this tutorial.

If you’re still building your HTML foundation, our article on HTML tags, elements, and attributes is a solid place to review before going further.

02The Basic Syntax: Anatomy of an Anchor Tag

Here’s the most straightforward anchor tag you can write:

<a href="https://example.com">Visit Example</a>

It has four parts working together:

• Opening tag: <a — starts the element
• The href attribute: the destination URL or value
• Link text: the visible, clickable content the user sees
• Closing tag: </a> — ends the element

The anchor tag is an inline element. It flows naturally with surrounding text and doesn’t create its own block. We covered inline vs block behavior in detail in our guide on inline vs block elements in HTML.

03The href Attribute: Giving Every Link a Destination

href stands for Hypertext Reference. It’s the attribute that defines where the link goes. It’s not optional — without it, the <a> tag renders on the page but won’t behave as a real link.

<!-- This renders as text, not a clickable link -->
<a>I go nowhere</a>

<!-- This is a real link -->
<a href="https://example.com">I take you somewhere</a>

The value of href is what makes the anchor tag flexible. It can hold:

• An absolute URL (full web address to an external page)
• A relative URL (a local path within your website)
• An ID fragment (to jump to a section on the same page)
• A mailto: value (to trigger an email client)
• A tel: value (to dial a phone number)

Each of these is worth understanding on its own. Let’s go through them.

04Absolute URLs: Linking to Pages Outside Your Site

An absolute URL is the full, complete address to a resource on the web. It includes the protocol, the domain, and the full path, leaving nothing for the browser to guess.

<!-- Linking to an external website -->
<a href="https://developer.mozilla.org/" target="_blank" rel="noopener noreferrer">
  MDN Web Docs
</a>

<!-- Absolute link to another page on the same domain -->
<a href="https://daniyaldev.com/introduction-to-html-hypertext-markup-language/">
  Introduction to HTML
</a>

Use absolute URLs whenever you’re linking to:

• An external website or domain
• A specific resource at a fixed, known URL
• Social media profiles, third-party tools, or documentation

Always Use https, Not http

When writing absolute URLs, always start with https://. The “s” means the connection is encrypted. Browsers flag http:// links as insecure, and search engines favor pages that use secure protocols. If a site you’re linking to still uses http://, check whether an https:// version exists first.

05Relative URLs: Navigating Within Your Own Website

A relative URL doesn’t include the full address. Instead, it’s a path that the browser resolves based on where the current page lives. No protocol, no domain — just the path to the target file.

Think of it like giving directions from your current position: “go to the about page” is enough when you already know which site you’re on.

<!-- Same folder as the current page -->
<a href="about.html">About Us</a>

<!-- A page inside a subfolder -->
<a href="blog/first-post.html">Read First Post</a>

<!-- Root-relative: always starts from the domain root -->
<a href="/contact/">Contact</a>

<!-- Go one folder level up -->
<a href="../index.html">Back to Home</a>

Three Types of Relative Paths

There are three flavors of relative URLs, and they each behave differently:

• Document-relative: Starts with a filename or folder name. Example: about.html or pages/about.html. The path is resolved from the current file’s location. If the page moves, the link might break.
• Root-relative: Starts with /. Example: /about/. This always resolves from the root of the domain, regardless of which page you’re currently on. Most reliable for internal navigation on multi-page websites.
• Parent-relative: Uses ../ to go one directory level up. Example: ../contact.html. Useful when you’re inside a subfolder and need to go back out.

For most projects, root-relative paths (/about/, /contact/) are the cleanest choice for internal links. They work correctly no matter where the linking page is located.

06In-Page Anchors: Jumping to a Section on the Same Page

Here’s where the word “anchor” becomes literal. You can use anchor tags in HTML to link to a specific section within the same page. The user clicks, and the page scrolls straight to that spot without loading a new page.

This is how tables of contents work, how “Back to top” buttons work, and how long documentation pages let you jump between topics instantly.

How to Build an In-Page Anchor Link

Two steps. First, mark your target element with an id attribute. Second, create a link that points to that id using the # symbol.

<!-- Table of contents at the top of the page -->
<nav>
  <a href="#intro">Introduction</a>
  <a href="#setup">Setup</a>
  <a href="#examples">Examples</a>
</nav>

<!-- Sections further down the page -->
<h2 id="intro">Introduction</h2>
<p>This section covers the basics...</p>

<h2 id="setup">Setup</h2>
<p>How to get started...</p>

<h2 id="examples">Examples</h2>
<p>See it in action...</p>

The # in href="#intro" tells the browser: don’t load a new page — find the element with id="intro" on this page and scroll to it.

Two rules to remember: IDs must be unique (no two elements can share the same id on one page), and the id value in your href must match exactly, including letter case.

You can also cross-link to a section on another page. Just add the ID to a full URL: href="https://example.com/page/#section-id". The browser loads the page and then jumps to that section automatically.

07The target Attribute: Controlling Where Links Open

By default, every link you click opens in the same browser tab. The target attribute changes that behavior.

<!-- Same tab — the default -->
<a href="/about/">About Us</a>

<!-- New tab -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  External Resource (opens in new tab)
</a>

<!-- Open in a named frame or window -->
<a href="/page.html" target="my-frame">Open in Frame</a>

target="_blank" is by far the most common value. It opens the link in a new browser tab, which is useful when linking to external resources so users don’t lose your page.

The rel=”noopener noreferrer” Security Rule

Any time you use target="_blank", pair it with rel="noopener noreferrer". This isn’t optional — it’s a real security requirement.

Without it, the newly opened page can use JavaScript to access your page through window.opener, potentially redirecting it or stealing data. Adding rel="noopener noreferrer" cuts off that access completely.

Modern browsers have added default protections, but the attribute is still the correct, professional approach. Make it automatic: write target="_blank", then immediately add rel="noopener noreferrer".

08Creating Email Links with mailto in HTML

The mailto HTML link opens the user’s default email client with the “To” field already filled in. It’s created by placing mailto: followed by an email address directly in the href value.

<!-- Basic mailto HTML link -->
<a href="mailto:[email protected]">Send us an email</a>

When a visitor clicks this, their email application opens with [email protected] already in the To field. They just type and send.

Pre-filling Subject and Body in a mailto HTML Link

You can take the mailto HTML link further by pre-filling the subject line, message body, and even CC or BCC recipients using URL parameters:

<!-- mailto with a subject line -->
<a href="mailto:[email protected]?subject=Website Inquiry">
  Email with subject
</a>

<!-- mailto with subject and body -->
<a href="mailto:[email protected]?subject=Project Inquiry&body=Hi, I would like to discuss a project.">
  Email with subject and body
</a>

<!-- mailto to multiple recipients -->
<a href="mailto:[email protected],[email protected]">
  Email both of us
</a>

<!-- Add CC and BCC -->
<a href="mailto:[email protected][email protected]&[email protected]&subject=Hello">
  Email with CC and BCC
</a>

A few syntax rules for mailto links:

• The first parameter starts with ?. Example: ?subject=Hello
• Additional parameters are joined with & in HTML (the HTML-safe encoding for &)
• Multiple email addresses are separated by a comma
• Spaces in subject or body text get encoded as %20 automatically by the browser

09Making Phone Numbers Clickable with tel in HTML

The tel HTML link turns any phone number into a one-tap call. On a mobile device, it opens the dialer. On a desktop, it tries to use whatever calling app the user has set up (Skype, FaceTime, etc.).

<!-- Basic tel HTML link -->
<a href="tel:+12025550123">Call Us: +1 (202) 555-0123</a>

<!-- US number -->
<a href="tel:+14155552671">+1 (415) 555-2671</a>

<!-- UK number -->
<a href="tel:+442071234567">+44 (207) 123-4567</a>

<!-- Pakistan number -->
<a href="tel:+923001234567">+92 (300) 123-4567</a>

The number inside href must be in international format:

• Start with +
• Add the country code (1 for US/Canada, 44 for UK, 92 for Pakistan, etc.)
• Then the full number with no spaces, dashes, or parentheses

The link text is separate from the href value and is only for human readability. You can format it as +1 (202) 555-0123 in the text, but the browser dials the raw value from href.

The tel HTML link shines on mobile-first websites, local business pages, restaurant listings, and any site where a visitor might want to call you directly. If your audience is on their phone, clickable numbers are not optional — they’re expected.

10The download Attribute: Prompting File Downloads

Normally, linking to a PDF or image file opens it in the browser. The download attribute changes that behavior and tells the browser to download the file instead of displaying it.

<!-- Download with the file's original name -->
<a href="/files/resume.pdf" download>Download Resume</a>

<!-- Download with a custom filename -->
<a href="/files/resume.pdf" download="john-doe-resume.pdf">
  Download Resume as PDF
</a>

<!-- Download an image -->
<a href="/images/wallpaper.jpg" download="free-wallpaper.jpg">
  Download Wallpaper
</a>

When you provide a value to the download attribute (like download="my-file.pdf"), that string becomes the saved filename. When you use download without a value, the original filename is preserved.

One important limitation: this only works for same-origin files. Due to browser security policies, you can’t force a download from a different domain using this attribute alone.

11Writing Link Text That Actually Works

The text inside your anchor tag carries real weight. Screen readers announce link text out loud when navigating a page, and search engines use it to understand what the linked page is about. Both matter.

The rule is simple: link text should describe the destination or action, not just prompt a click.

<!-- Avoid -->
<p>To learn more about HTML, <a href="/guide.html">click here</a>.</p>

<!-- Better -->
<p>Read our <a href="/guide.html">complete HTML beginner's guide</a> to go deeper.</p>

Good link text also gives search engines clear context signals. When Google sees a link that says “complete HTML beginner’s guide,” it understands what the linked page is about. This is a direct part of how links build topical relevance, something we touched on in our guide to semantic HTML and why it matters for SEO.

One more thing: don’t include the word “link” in your link text. Screen readers already announce it as a link. “Link to our guide” is redundant.

12Anchor Tag Mistakes to Avoid

These are the most common errors beginners make with anchor tags in HTML, and exactly how to correct them.

1. Empty href sends the user to the top of the page

<!-- Unintentional: scrolls the page to the very top -->
<a href="">Menu Item</a>

<!-- Use a real path or a placeholder you'll replace -->
<a href="/services/">Services</a>
<a href="#">Placeholder (replace before publishing)</a>

2. Missing rel on external links that open in a new tab

<!-- Security vulnerability -->
<a href="https://example.com" target="_blank">Visit</a>

<!-- Correct: always include rel when using target="_blank" -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit</a>

3. Putting interactive elements inside an anchor tag

<!-- Invalid HTML: a button inside a link -->
<a href="/page">
  <button>Go to Page</button>
</a>

<!-- Correct: style the anchor to look like a button with CSS -->
<a href="/page" class="btn">Go to Page</a>

In HTML5, you can wrap block elements like <div> or <h2> inside an <a> tag. But you cannot nest interactive elements like buttons, inputs, or other links inside it. That creates invalid, broken HTML.

4. Using vague ID names for in-page anchors

<!-- Hard to manage and easy to confuse -->
<h2 id="s1">Section One</h2>
<h2 id="s2">Section Two</h2>

<!-- Descriptive IDs are much better -->
<h2 id="getting-started">Getting Started</h2>
<h2 id="advanced-techniques">Advanced Techniques</h2>

Descriptive IDs also show up in the URL when clicked (e.g., /page/#getting-started), making it easier for users to share or bookmark a specific section.

13Quick Reference: Every Anchor Tag Type at a Glance

14What You Learned Today

Anchor tags in HTML are the foundation of navigation on the web. In this tutorial, you covered all the main ways to build links:

• The basic <a> syntax and how href defines the destination
• Absolute URLs for linking to external pages and resources
• Relative URLs for navigating within your own site
• In-page anchors using id for smooth section-to-section navigation
• The target="_blank" attribute and why rel="noopener noreferrer" always goes with it
• The mailto HTML link for opening email clients with pre-filled data
• The tel HTML link for making phone numbers instantly tappable
• The download attribute for prompting file downloads
• How to write descriptive, accessible link text that works for both users and search engines

Links are in every page you’ll ever build. Now you understand not just how to write them, but why each type exists and when to use it. That’s the difference between copying code and actually knowing what you’re doing.

Next in this series, we’ll look at the Link Attributes in HTML like adding Target, Rel, and Download. Keep going.