HTMLpad

HTML Link Code: How to Make a Link in HTML

By · · 4 min read

Two index cards on a wooden desk joined by a short length of orange string, one card slightly overlapping the other

The HTML code for a link is <a href="https://example.com">Link text</a>. The href attribute holds the address the link goes to, and the text between the opening and closing tags is what readers see and click. The same element links to other sites, to pages on your own site, to a section of a page or to a file.

The <a> element, short for anchor, is the oldest idea on the web: pages pointing to other pages. This guide shows the variations you will actually use, each with a live example you can open in HTMLpad and change.

<!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> for more.</p>
  <p>Or go back to the <a href="/">home page</a>.</p>
</body>
</html>

Try this example in HTMLpad

Everything about a link comes down to two choices: where it goes (href) and what it says (the text). The MDN reference for the anchor element lists every attribute, but most links never need more than these two.

Absolute and relative addresses

An absolute address includes the whole thing, https:// and the domain. Use it for links to other websites.

A relative address is read from the page the link is on. Use it for links within your own site, so they keep working if the domain changes.

You write The link goes to
href="https://example.com/about/" That exact address
href="about.html" about.html in the same folder as the current page
href="/about/" /about/ at the root of the current site
href="../index.html" index.html one folder up

The same rules apply to images and stylesheets. If a link works online but not when you open the file on your computer, a path starting with a slash is the likely cause, as I explain in how to link CSS to HTML.

Add target="_blank". When you do, also add rel="noopener", which stops the new page from getting control over the page that opened it. Modern browsers apply this by default, but writing it costs nothing and covers older ones.

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>New tab</title></head>
<body>
  <p><a href="https://example.com/" target="_blank" rel="noopener">Opens in a new tab</a></p>
  <p><a href="https://example.com/">Opens in the same tab</a></p>
</body>
</html>

Try this example in HTMLpad

Use new tabs sparingly. Readers can always choose to open a link in a new tab themselves, but they cannot easily stop a page from doing it to them. New tabs make sense for links that would interrupt a task, such as help pages linked from a form.

Link to a section of the same page

Give the target an id, then link to it with a hash. This is how tables of contents work.

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Jump links</title>
<style>section { min-height: 90vh; border-top: 1px solid #ccc; }</style></head>
<body>
  <nav><a href="#prices">Prices</a> · <a href="#contact">Contact</a></nav>
  <section id="prices"><h2>Prices</h2></section>
  <section id="contact"><h2>Contact</h2><a href="#">Back to top</a></section>
</body>
</html>

Try this example in HTMLpad

You can combine both: href="/guide/#prices" opens another page and scrolls to its section with the id prices.

A link can wrap an image, so clicking the picture follows the link; see how to make an image a link. It can also be styled to look like a button; see the HTML button link guide, which also explains when you should use a real button instead.

Write link text people can understand

Search engines and screen readers both rely on link text. "Click here" tells neither of them anything, and a list of five "click here" links read aloud is useless. Describe where the link goes: "download the 2026 price list" rather than "click here for the list". The W3C's guidance on link purpose explains why this matters for accessibility.

Common mistakes

To try changes quickly without setting anything up, paste your page into the HTML sandbox and edit it there. For more on working with existing files, see how to edit an HTML file and the main guide to opening HTML files.

Frequently asked questions

What does href mean?

It stands for hypertext reference. It is the attribute that holds the address a link points to.

Add target="_blank" rel="noopener" to the <a> tag. Use it for links that would interrupt what the reader is doing, not for every external link.

Usually the address is missing https://, or a relative path is being read from a different folder than you expect. Hover over the link and check the address your browser shows at the bottom of the window.

Can a link go to a specific part of another page?

Yes, if that part has an id. Add a hash and the id to the address, as in /guide/#prices.

More in Open and Edit HTML