HTML href Attribute

What You’ll Learn

The href attribute specifies where a hyperlink points. Its primary use is on <a href="..."> anchor elements to navigate to other pages, sections, email addresses, or phone numbers. It also appears on <link> (stylesheets, icons), <area> (image maps), and <base> (document base URL). Values can be absolute URLs, relative paths, fragments, mailto:, or tel: links.

Purpose of href Attribute

The href attribute (short for hypertext reference) tells the browser where to go when a user activates a link. On <a> elements, it creates clickable hyperlinks to web pages, files, email clients, phone dialers, or in-page sections. Without a meaningful href, an anchor is not a navigation link.

Beyond anchors, href on <link> points to external resources like CSS stylesheets and favicons. On <area>, it defines clickable regions in an image map. On <base>, it sets the default base URL for all relative links in the document. Choose the right value type—absolute, relative, fragment, mailto:, or tel:—based on where you want users to go.

📝 Syntax

Add href to an anchor element with a valid URL, path, or protocol link:

<!-- External page: absolute URL -->
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
  Visit Example.com
</a>

<!-- Same site: relative path -->
<a href="/html">HTML tutorials</a>

<!-- In-page jump: fragment with matching id -->
<a href="#details">Jump to details</a>
<section id="details">Details content</section>

<!-- Email and phone -->
<a href="mailto:hello@example.com">Email us</a>
<a href="tel:+15551234567">Call us</a>

Syntax Rules

• Primary use is on <a> elements to create hyperlinks users can click or activate with the keyboard.
• Absolute URLs start with a scheme such as https:// and include the full address (e.g. https://www.example.com/page).
• Relative paths resolve from the current page or site root (e.g. about.html, /html, ../images/logo.png).
• Fragment links use #id and must match an id on the target element—not the deprecated name attribute.
• Use mailto: and tel: for email and phone links; add download on anchors to suggest file downloads.
• For external links opened in a new tab, pair target="_blank" with rel="noopener noreferrer" for security.

💎 Values

The href attribute accepts a URL string. Common value types include:

• href="https://www.example.com" — Absolute URL to an external or full web address.
• href="/html" or href="page.html" — Relative path within your site.
• href="#section-id" — Fragment link to an element with id="section-id" on the same or target page.
• href="mailto:hello@example.com" — Opens the user’s email client with the address filled in.
• href="tel:+15551234567" — Starts a phone call on devices that support tel: links.
• href="report.pdf" download — Suggests downloading the linked file instead of navigating to it.

<!-- Stylesheet on link element -->
<link rel="stylesheet" href="/styles/main.css">

<!-- Document base URL -->
<base href="https://www.example.com/docs/">

<!-- JavaScript: change link destination -->
<script>
  var link = document.getElementById("dynamicLink");
  link.href = "https://www.example.com/new-page";
  link.setAttribute("href", "https://www.example.com/alt-page");
</script>

Applicable Elements

Absolute vs Relative vs Fragment vs mailto: href Values

Examples Gallery

External absolute URL, mixed link types (relative, mailto, fragment), and dynamic href updates with JavaScript.

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

<nav>
  <a href="/html">HTML tutorials</a>
  <a href="mailto:hello@example.com">Email us</a>
  <a href="#details">Jump to details</a>
</nav>

<section id="details">
  <h2>Details</h2>
  <p>Fragment links target this section via its id.</p>
</section>

<a id="dynamicLink" href="https://www.example.com">Go to site</a>
<button type="button" id="changeLink">Change link URL</button>

<script>
  document.getElementById("changeLink").addEventListener("click", function () {
    var link = document.getElementById("dynamicLink");
    link.href = "https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/href";
  });
</script>

♿ Accessibility

• Use descriptive link text — Write link labels that explain the destination (e.g. “Read our HTML tutorials”) instead of vague phrases like “click here” or “read more” with no context.
• Make link purpose clear out of context — Screen reader users often navigate by links alone. Each link text should make sense without surrounding paragraph text.
• Distinguish links from buttons — Use <a href> for navigation and <button> for actions. Do not use href="#" as a fake button.
• Indicate when links open externally — For target="_blank", consider visible text or an accessible label so users know a new tab opens.
• Ensure fragment targets exist — Verify href="#id" matches a real id on the page so keyboard and screen reader users reach the intended section.
• Do not rely on URL alone — Visible link text should describe content, not expose raw URLs unless that is intentional (e.g. citation links).

💡 Best Practices