Runnable HTML Docs: Links (a href)

Q: How do you make a link in HTML?

Use the anchor element: Example . href is the destination and the text between the tags is what the reader clicks.

Q: How do I link to a specific part of a page?

Give the target element an id, then link to it with a hash: FAQ and FAQ . From another page, add the hash to the URL: .

Q: Why does my link go to the wrong page when I write www?

Without https:// the browser treats www.example.com as a relative path on your own site, so the link goes to something like yoursite.com/www.example.com. Always write the scheme for external links: href="https://www.example.com".

Q: Can an a tag contain a div?

Yes. In HTML5 an can wrap block content such as a , a heading and a paragraph, which is how whole-card links are built. It cannot contain another link, a button, or any other interactive element.

How to make a link in HTML

A link is an anchor element, <a>, with an href attribute. href is where the link goes; the content between the tags is what the reader clicks.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Links</title>
</head>
<body>
  <p>
    Read the <a href="https://developer.mozilla.org/">MDN web docs</a>
    or go back to the <a href="/">home page</a>.
  </p>
  <p>This is <a>an anchor with no href</a>: it is not a link.</p>
</body>
</html>

Browsers show links blue and underlined and change the cursor to a hand. The last line shows why href matters: without it, <a> is plain text. It is not focusable, not clickable, and not styled as a link.

Absolute and relative URLs

The value of href decides where the link goes. The main forms:

`href`	Goes to
`https://example.com/page`	An absolute URL: exactly that address
`/about`	`about` at the root of the current site
`about.html`	`about.html` in the same folder as the current page
`../index.html`	`index.html` one folder up
`#pricing`	The element with `id="pricing"` on this page
`/help#faq`	The `faq` section of another page on this site
`mailto:hi@example.com`	A new email in the reader's mail app
`tel:+15551234567`	A phone call, on devices that can make one

Use absolute URLs for other sites and root-relative paths (/about) inside your own: they keep working when the page that contains them moves to another folder.

<a href="https://www.wikipedia.org/">Wikipedia</a>  <!-- another site -->
<a href="/pricing">Pricing</a>                     <!-- same site, from the root -->
<a href="www.wikipedia.org">Broken</a>              <!-- relative path, not a site! -->

The last line is the most common link bug. With no https://, the browser reads www.wikipedia.org as a file name in the current folder.

Email and phone links have their own page: HTML email links.

Linking to a section of the page

Any element with an id is a target. Link to it with # followed by the id, and the browser scrolls to it. Click the links in the preview:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Anchor links</title>
  <style>
    section { min-height: 220px; padding: 8px; border-top: 2px solid #e5e7eb; }
    :target { background: #fef3c7; }
  </style>
</head>
<body>
  <nav>
    <a href="#install">Install</a> |
    <a href="#usage">Usage</a> |
    <a href="#faq">FAQ</a>
  </nav>

  <section id="install"><h2>Install</h2></section>
  <section id="usage"><h2>Usage</h2></section>
  <section id="faq">
    <h2>FAQ</h2>
    <a href="#top">Back to top</a>
  </section>
</body>
</html>

Some details:

The id must match exactly, including case. href="#FAQ" does not find id="faq".
href="#top" and href="#" scroll to the top of the page even when no element has the id top.
The :target selector styles the section the URL currently points to. It highlights here on a real page; the preview scrolls without changing its address, so the highlight does not show in it.
To link to a section of another page, add the hash to that page's URL: <a href="/docs/html/table#caption">.

A sticky or fixed header covers the top of the section you jump to. scroll-margin-top on the targets leaves room for it, and scroll-behavior: smooth animates the jump:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky header</title>
  <style>
    html { scroll-behavior: smooth; }
    body { margin: 0; font-family: system-ui, sans-serif; }
    header {
      position: sticky;
      top: 0;
      padding: 12px 16px;
      background: #111827;
    }
    header a { color: #fff; margin-inline-end: 12px; }
    h2 { scroll-margin-top: 60px; margin: 0; padding: 8px 16px; background: #e5e7eb; }
    p { height: 320px; margin: 0; padding: 16px; }
  </style>
</head>
<body>
  <header>
    <a href="#one">One</a>
    <a href="#two">Two</a>
    <a href="#three">Three</a>
  </header>
  <h2 id="one">Section one</h2>
  <p>Content</p>
  <h2 id="two">Section two</h2>
  <p>Content</p>
  <h2 id="three">Section three</h2>
  <p>Content</p>
</body>
</html>

Delete the scroll-margin-top line and click Two again: the heading ends up hidden behind the dark header.

Download links

The download attribute asks the browser to save the file instead of opening it. Its value, if you give one, is the suggested file name:

<a href="/files/report-2026.pdf" download>Download the report</a>
<a href="/files/r-8f2a.pdf" download="report.pdf">Download (saved as report.pdf)</a>

download only works for files on the same origin as the page (same scheme, host and port) and for data: and blob: URLs. For a file on another origin, even a subdomain, browsers ignore it and navigate to the file as a normal link. The server can force a download for any file with the Content-Disposition: attachment header.

Link text that makes sense

Screen reader users often move through a page link by link, hearing only the link text. "Click here" and "Read more" tell them nothing.

<!-- Vague: -->
To see our prices, <a href="/pricing">click here</a>.

<!-- Clear: -->
See the <a href="/pricing">pricing plans</a>.

The title attribute shows a tooltip on hover but is not shown on touch screens or to most keyboard users, so do not put anything important in it.

Making a whole card a link

An <a> can wrap block content: a heading, an image and a paragraph can all be one link. This is how clickable cards are built.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Card link</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .card {
      display: block;
      max-width: 280px;
      padding: 16px;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      color: #111827;
      text-decoration: none;
    }
    .card:hover { border-color: #2563eb; }
    .card h3 { margin: 0 0 6px; color: #2563eb; }
    .card p { margin: 0; }
  </style>
</head>
<body>
  <a class="card" href="https://developer.mozilla.org/">
    <h3>MDN web docs</h3>
    <p>Reference pages for HTML, CSS and JavaScript.</p>
  </a>
</body>
</html>

display: block makes the whole box clickable, not only the text. Keep the card's content short, because a screen reader reads all of it as the link's name. And never put another link or a button inside: interactive elements cannot be nested in <a>.

Other attributes of the a tag

Attribute	What it does
`href`	The destination. Without it, `<a>` is not a link
`target`	Where to open it; `target="_blank"` opens a new tab, see open link in new tab
`rel`	The relationship to the target: `noopener`, `nofollow`, `sponsored`, `ugc`
`download`	Save the file instead of opening it
`hreflang`	The language of the linked page, as a hint
`referrerpolicy`	How much of the current URL to send as the referrer

Common mistakes

No scheme on an external URL. href="www.site.com" is a relative path. Write https://.
<a href="#"> for a JavaScript action. It scrolls to the top and adds # to the URL. If clicking does not go anywhere, use a <button>.
A link inside a link, or a button inside a link. Both are invalid HTML: a second <a> makes the parser close the first one early, and a click on a button inside a link has no clear target.
Spaces in file names. href="my file.html" usually works because the browser encodes the space, but my-file.html avoids the question entirely.
"Click here" as link text. Describe the destination instead.
Mismatched id case. #Pricing and id="pricing" are different.

Frequently Asked Questions

How do you make a link in HTML?

Use the anchor element: <a href="https://example.com">Example</a>. href is the destination and the text between the tags is what the reader clicks.

What does href stand for?

Hypertext reference. It holds the URL the link points to: a full address, a path on the same site such as /about, a section of the page such as #pricing, or a scheme like mailto:.

How do I link to a specific part of a page?

Give the target element an id, then link to it with a hash: <h2 id="faq">FAQ</h2> and <a href="#faq">FAQ</a>. From another page, add the hash to the URL: <a href="/help#faq">.

Why does my link go to the wrong page when I write www?

Without https:// the browser treats www.example.com as a relative path on your own site, so the link goes to something like yoursite.com/www.example.com. Always write the scheme for external links: href="https://www.example.com".

Can an a tag contain a div?

Yes. In HTML5 an <a> can wrap block content such as a <div>, a heading and a paragraph, which is how whole-card links are built. It cannot contain another link, a button, or any other interactive element.

Related concepts