HTML Links

Links are what turn a collection of separate HTML documents into the Web. Almost every page you visit uses links to send you somewhere else — another page on the same site, a different website entirely, a file to download, an email address, or even a specific spot further down the same page. In HTML, links are created with the <a> (anchor) element, and understanding exactly how it works — and how browsers interpret it — is essential to building usable, navigable websites.

Overview: How Links Work

The <a> element is an inline-level element (though in HTML5 it can also wrap block-level content) that turns its contents into a clickable link. The destination of the link is set with the href attribute (short for “hypertext reference”). Without an href, an <a> tag is not actually a link at all — it is just an anchor placeholder with no interactive behavior, no keyboard focus, and no special cursor.

When the browser’s HTML parser encounters an <a> tag, it creates an anchor node in the DOM tree, just like any other element. What makes it special is the browser’s built-in behavior for elements with an href attribute: the user agent stylesheet renders the text with a distinct color (blue by default) and an underline, changes the mouse cursor to a pointer on hover, adds the element to the page’s tab order so it can be reached with the keyboard, and exposes it to the accessibility tree with the ARIA role of link. None of that styling is required — it’s presentation, and can be fully overridden with CSS — but the semantic meaning (“this is a navigable link”) comes from the HTML itself, not from how it looks.

The value of href can point to many different kinds of destinations:

  • An absolute URL — a full address including the protocol, such as https://www.example.com/page.html. This works from any page, anywhere.
  • A relative URL — a path relative to the current page’s location, such as about.html or /products/shoes.html. These are shorter and automatically adapt when you move a site between domains (e.g. from a staging server to production).
  • A fragment identifier — a URL starting with # that points to an element with a matching id attribute on the current page, such as #section-2. The browser scrolls to that element instead of loading a new page.
  • A protocol handler link, such as mailto: for email addresses or tel: for phone numbers, which hands off to the operating system’s default mail or phone app.

Syntax

<a href="URL" target="_blank" rel="noopener noreferrer" title="tooltip text">
  link text or other content
</a>
Attribute Purpose
href The destination URL, fragment, or protocol link. Required for the element to actually function as a link.
target Where to open the link: _self (default, same tab), _blank (new tab/window), _parent, or _top.
rel Describes the relationship to the linked resource, e.g. noopener, noreferrer, nofollow. Important for security when using target="_blank".
title Extra advisory text shown as a tooltip on hover. Optional and should not replace clear link text.
download Signals that the browser should download the linked resource rather than navigate to it, optionally with a suggested filename.

Examples

Example 1: A basic link to another site

<p>Visit <a href="https://www.example.com">Example.com</a> for more information.</p>

Result: The words “Example.com” appear underlined and colored (blue by default), sitting inline within the sentence. Clicking them navigates the browser to https://www.example.com in the same tab.

This is the simplest possible link: text content wrapped in an <a> tag with an absolute href. Because no target is specified, it opens in the current tab, replacing the current page.

Example 2: Opening a link safely in a new tab

<p>Read the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank" rel="noopener noreferrer" title="MDN HTML documentation">official HTML documentation</a> on MDN.</p>

Result: The phrase “official HTML documentation” renders as a link within the sentence. Hovering over it briefly shows a tooltip reading “MDN HTML documentation.” Clicking it opens the MDN page in a brand-new browser tab, leaving the original page open.

The target="_blank" attribute forces a new browsing context. The accompanying rel="noopener noreferrer" is a security best practice: without it, the newly opened page could use window.opener to manipulate the original tab, and some browsers also leak the referring URL. noopener blocks that access; noreferrer additionally suppresses the referrer information sent to the destination.

Example 3: In-page anchors, email, and phone links together

<nav>
  <ul>
    <li><a href="#section-2">Jump to Section 2</a></li>
    <li><a href="mailto:info@example.com">Email us</a></li>
    <li><a href="tel:+15551234567">Call us</a></li>
    <li><a href="/about.html">About page</a></li>
  </ul>
</nav>
<h2 id="section-2">Section 2</h2>
<p>This is the target of the anchor link above.</p>

Result: A navigation list with four clickable items appears: “Jump to Section 2,” “Email us,” “Call us,” and “About page.” Clicking “Jump to Section 2” smoothly scrolls the page down to the heading with id="section-2" without a full page reload. Clicking “Email us” opens the visitor’s default email client with a new message addressed to info@example.com. Clicking “Call us” on a phone or device that supports it opens the dialer pre-filled with the number. “About page” navigates to about.html relative to the current page’s folder.

This example shows that href is not limited to web addresses — the browser inspects the scheme (#, mailto:, tel:, or a bare path) and reacts accordingly.

How It Works Step by Step

  • The HTML parser reads <a href="..."> and creates an HTMLAnchorElement node in the DOM tree, as a child of whatever element contains it.
  • The browser’s default (user-agent) stylesheet applies link styling — underline and link color — unless overridden by the page’s own CSS.
  • The element is added to the document’s focus order, so pressing Tab can reach it, and pressing Enter while it is focused activates it, exactly like clicking.
  • When activated, the browser reads the href and decides what to do: fetch a new document and replace the current page (default), open a new browsing context (target="_blank"), scroll to a fragment within the current document (#id), or hand off to another application (mailto:, tel:).
  • If the destination is a fragment identifier, no network request happens at all — the browser simply finds the element whose id matches and scrolls it into view.

Common Mistakes

Mistake 1: Forgetting to close the anchor tag

<p>Visit our <a href="https://example.com">homepage for more info.</p>

Here the <a> tag is never closed, so the browser’s error-recovery parsing will guess where it should end — often swallowing content the author never intended to be part of the link, or breaking the rest of the page’s structure. Always close every <a> tag explicitly:

<p>Visit our <a href="https://example.com">homepage</a> for more info.</p>

Mistake 2: Omitting the protocol in an external URL

<a href="www.example.com">Visit our site</a>

Without https:// (or http://), the browser treats www.example.com as a relative path, not a domain name. Clicking it tries to load a page named www.example.com inside the current site’s folder — almost never what was intended, and it will produce a broken link. Always include the full protocol for external destinations:

<a href="https://www.example.com">Visit our site</a>

Mistake 3: Vague, non-descriptive link text

<p>To download the report, <a href="/report.pdf">click here</a>.</p>

This markup is technically well-formed, but “click here” tells screen-reader users and search engines nothing about the destination. Screen readers often let users browse a page’s links out of context (as a list), where “click here” repeated multiple times is meaningless. Prefer descriptive link text:

<p>Download the <a href="/report.pdf">2026 annual report (PDF)</a>.</p>

Best Practices

  • Write descriptive link text that makes sense out of context — avoid “click here” or “read more” alone.
  • Always use https:// for external links when the site supports it, and double-check relative paths point to the correct location.
  • When using target="_blank", always pair it with rel="noopener noreferrer" for security.
  • Reserve target="_blank" for cases where leaving the current page would lose the user’s place (e.g. reference links); opening every link in a new tab is disorienting.
  • Give every scroll target (used by #fragment links) a unique, meaningful id.
  • Don’t nest another interactive element (like a button or another link) inside an <a> — it is invalid and behaves unpredictably.
  • Remember that link color, underline, and hover effects are styling — control them with CSS in a separate stylesheet, not inline attributes.
  • Test that every link is reachable and activatable using only the keyboard (Tab and Enter).

Practice Exercises

  • Exercise 1: Create a short paragraph containing a link to https://www.wikipedia.org with descriptive link text (not the raw URL).
  • Exercise 2: Build a page with a heading that has id="contact" further down the page, and a link near the top that jumps to it using a fragment identifier.
  • Exercise 3: Write a link that opens the user’s email client addressed to support@example.com with descriptive link text, and a second link to an external site that opens safely in a new tab.

Summary

  • The <a> element with an href attribute creates a clickable link; without href it has no interactive behavior.
  • href can be an absolute URL, a relative path, a #fragment pointing to an element’s id, or a protocol like mailto: or tel:.
  • Default link styling (color, underline) comes from the browser’s user-agent stylesheet and can be overridden with CSS.
  • Use target="_blank" sparingly, and always with rel="noopener noreferrer" for security.
  • Always close <a> tags, include the full protocol on external URLs, and write descriptive link text for accessibility and SEO.