⌘K
Home / Blog / HTML Anchor Tag & Links: Internal, External, Email, and Tel Links
HTML Basics 2026-09-23 · 10 min read

HTML Anchor Tag & Links: Internal, External, Email, and Tel Links

Master the HTML anchor tag. Learn to create internal links, external links with target blank, mailto, tel links, and jump-to sections.

What Is the HTML Anchor Tag?

The HTML anchor tag <a> is one of the most fundamental building blocks of the web. Without it, the interconnected network of pages we call the internet would not exist. Every clickable link you see on a website — whether it navigates to another page, opens an email client, or dials a phone number — is powered by the <a> element and its href attribute.

At its simplest, an anchor tag wraps text (or any inline element) and uses the href attribute to define the destination:

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

But the anchor tag is far more powerful than this basic example suggests. In this comprehensive HTML links guide, you'll learn every important variation — from internal navigation to email links, telephone links, fragment identifiers, and security best practices. You can test every example instantly using the Live HTML/CSS/JS Editor.

The href Attribute: The Heart of Every Link

The href (Hypertext REFerence) attribute specifies where the link points. The value can be:

  • An absolute URL — a full web address including protocol (https://)
  • A relative URL — a path relative to the current page
  • A fragment identifier — a #id reference to an element on the same page
  • A mailto: URI — opens the user's email client
  • A tel: URI — initiates a phone call on mobile devices
  • A JavaScript: URI — (not recommended for modern development)

External Links: Linking to Other Websites

An external link points to a resource on a different website. Always use an absolute URL:

<a href="https://www.wikipedia.org">Visit Wikipedia</a>

Opening Links in a New Tab: target="_blank"

By default, links open in the same browser tab. To open a link in a new tab or window, use target="_blank":

<a href="https://www.wikipedia.org" target="_blank">
  Visit Wikipedia (opens in new tab)
</a>

Security: rel="noopener noreferrer"

Whenever you use target="_blank", you must add rel="noopener noreferrer". Without it, the opened page can access your page's window.opener object — a known security vulnerability called "reverse tabnapping":

<a href="https://www.wikipedia.org"
   target="_blank"
   rel="noopener noreferrer">
  Visit Wikipedia (safe external link)
</a>
  • noopener — Prevents the new page from accessing window.opener
  • noreferrer — Hides the referrer information and also implies noopener
Best Practice: Modern browsers set rel="noopener" implicitly for target="_blank" links since 2021, but adding it explicitly ensures backward compatibility and communicates intent clearly.

Internal Links: Navigating Within Your Website

Internal links connect pages within the same website. Use relative URLs to keep your links portable and maintainable:

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

<!-- Link to a page in a subdirectory -->
<a href="blog/my-first-post.html">My First Post</a>

<!-- Link to a page in a parent directory -->
<a href="../contact.html">Contact</a>

<!-- Link from root -->
<a href="/products/widget.html">Widget Product Page</a>

Anchor IDs and Fragment Identifiers: Jump-to Sections

You can link to a specific section of a page by combining an element's id attribute with a fragment identifier (the # symbol). This is essential for long-form content, table-of-contents navigation, and single-page applications.

Step 1 — Add an id to the target element

<h2 id="pricing">Our Pricing Plans</h2>

Step 2 — Link to that id using a fragment

<!-- Same page -->
<a href="#pricing">Jump to Pricing</a>

<!-- Different page -->
<a href="/plans.html#pricing">See Plans & Pricing</a>

When a user clicks the link, the browser scrolls smoothly to the element with id="pricing". You can make scrolling smooth with CSS:

html {
  scroll-behavior: smooth;
}

Mailto Links: Opening the Email Client

The mailto: URI scheme opens the user's default email application pre-filled with address information. This is extremely useful for contact links:

<!-- Simple email link -->
<a href="mailto:hello@example.com">Email Us</a>

<!-- With subject line -->
<a href="mailto:hello@example.com?subject=Website%20Inquiry">
  Send Inquiry
</a>

<!-- With subject, CC, and body -->
<a href="mailto:hello@example.com
  ?subject=Support%20Request
  &cc=support@example.com
  &body=Hello%2C%20I%20need%20help%20with...">
  Contact Support
</a>

Always URL-encode special characters in mailto links. Spaces become %20, the @ symbol stays as-is in the address, and line breaks become %0A.

Tel Links: Clickable Phone Numbers

The tel: URI scheme creates a clickable phone number. On mobile devices, tapping the link initiates a call. On desktops, it may open a calling application like Skype or FaceTime:

<!-- Always use international format -->
<a href="tel:+15551234567">+1 (555) 123-4567</a>

<!-- Display formatted, link with E.164 format -->
<a href="tel:+442071234567">
  <svg>...phone icon...</svg>
  +44 (0)20 7123 4567
</a>

Always write the href value in E.164 international format (starting with + and country code) regardless of how you display the number to users.

The download Attribute: Forcing File Downloads

The download attribute tells the browser to download the linked resource instead of navigating to it. You can optionally provide a suggested filename:

<!-- Download with original filename -->
<a href="/files/report-2024.pdf" download>Download Report</a>

<!-- Download with a custom filename -->
<a href="/files/report-2024.pdf" download="annual-report.pdf">
  Download Annual Report
</a>
Note: The download attribute only works for same-origin URLs. For cross-origin downloads, the server must send the appropriate Content-Disposition header.

Styling Links: The Four States

Links have four interactive states that you should always style for a good user experience:

/* Unvisited link */
a:link {
  color: #2563eb;
  text-decoration: underline;
}

/* Visited link */
a:visited {
  color: #7c3aed;
}

/* Hovered link */
a:hover {
  color: #1d4ed8;
  text-decoration: none;
}

/* Focused link (keyboard navigation) */
a:focus {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Active (being clicked) */
a:active {
  color: #1e40af;
}

Never remove the :focus outline without providing an alternative — keyboard users depend on it for navigation.

Accessible Links: Writing Good Link Text

Link text should describe the destination clearly. Screen readers read link text out of context, so "click here" and "read more" are meaningless to assistive technology users.

<!-- Bad: vague link text -->
<p>To download the report, <a href="/report.pdf">click here</a>.</p>

<!-- Good: descriptive link text -->
<p><a href="/report.pdf">Download the 2024 Annual Report (PDF)</a></p>

<!-- For icon-only links, use aria-label -->
<a href="/cart" aria-label="View shopping cart">
  <svg aria-hidden="true">...</svg>
</a>

Advanced Anchor Tag Attributes

The hreflang Attribute

Use hreflang to indicate the language of the linked resource — important for multilingual websites:

<a href="/fr/accueil" hreflang="fr">Voir en Français</a>

The type Attribute

The type attribute hints at the MIME type of the linked content:

<a href="/podcast.mp3" type="audio/mpeg">Listen to Episode 1</a>

The ping Attribute

The ping attribute sends a POST request to specified URLs when the link is clicked — used for analytics tracking without JavaScript:

<a href="https://example.com" ping="/track-click">Visit Example</a>

Common Mistakes to Avoid

  • Using # as a placeholder href — Use button elements for JavaScript actions instead
  • Forgetting rel="noopener" on target="_blank" links — Always add it
  • Nesting block elements inside anchor tags — HTML5 allows it, but use it sparingly and ensure correct semantics
  • Using JavaScript: URIs — Use event listeners on buttons instead
  • Missing phone country codes in tel: links — Always use E.164 format

A Complete Anchor Tag Reference

<a
  href="URL"              <!-- Destination (required) -->
  target="_blank"         <!-- Open in new tab -->
  rel="noopener noreferrer" <!-- Security for external links -->
  download="filename.pdf" <!-- Force download -->
  hreflang="en"           <!-- Language of linked page -->
  type="text/html"        <!-- MIME type hint -->
  title="Tooltip text"    <!-- Hover tooltip -->
  aria-label="Description" <!-- Accessible label -->
>
  Link Text
</a>

Want to experiment with all these link types interactively? The Live HTML/CSS/JS Editor lets you test anchor tags in real time. For formatting your HTML code cleanly, try the HTML Formatter.

Frequently Asked Questions

What is the difference between an absolute and relative URL in href?
An absolute URL includes the full address (e.g., https://example.com/page.html) and works from any location. A relative URL is relative to the current page (e.g., ../about.html) and is better for internal links within a site because it works across different environments (dev, staging, production).
Why should I use rel="noopener noreferrer" with target="_blank"?
Without rel="noopener", the new tab can access the opening page via window.opener, allowing a malicious site to redirect your original page — this is called tabnapping. The noreferrer value also prevents sending your URL as a referrer to the linked site, improving privacy.
How do I link to a specific section on a page?
First, add a unique id attribute to the target element (e.g., <h2 id="features">). Then create a link with href="#features" for same-page navigation, or href="/page.html#features" to link from another page.
Can I put a div or image inside an anchor tag?
Yes, HTML5 allows block-level elements inside <a> tags. This is called a "block link" and makes an entire area clickable. However, you cannot nest interactive elements (buttons, other links, inputs) inside an anchor tag.
How do I create a mailto link with a pre-filled subject and body?
Use query parameters in the mailto URI: href="mailto:you@example.com?subject=Hello&body=Hi%20there". Always URL-encode spaces as %20 and special characters accordingly. The & separator joins multiple parameters.
What format should I use for tel: links?
Always use E.164 international format in the href: href="tel:+15551234567". Start with +, then the country code, then the number without spaces or dashes. The display text can be formatted however you like for readability.

Try Our Free HTML CSS Tools

Practice what you've learned with our free online tools — no installation required.

Live HTML/CSS Editor HTML Formatter CSS Formatter