The basic HTML link tag does the job in one line

To make text clickable, wrap it in an <a> tag with an href attribute that points to where you want the link to go. The text between the opening and closing tags is what the reader sees and clicks on.

Here is the simplest example:

<a href="https://www.example.com">Click here</a>

When a browser displays this, the reader sees the words "Click here" in blue and underlined. Clicking it takes them to example.com. The href value can be a full web address, a relative path to another file on your site, or even an email address or phone number.

Key Takeaways

  • The <a> tag with an href attribute creates a link; the text inside the tags is what appears clickable to the reader.
  • Use a full web address starting with https:// to link to other websites, or a relative path like pages/about.html to link to files on your own site.
  • Links to email addresses use href="mailto:name@example.com" and links to phone numbers use href="tel:+1-555-0123".
  • The target="_blank" attribute opens the link in a new tab instead of replacing the current page.

Linking to other websites

When you want to send readers to a different website, use the full web address in the href attribute, starting with https://. This tells the browser to leave your site and go to that address.

<a href="https://www.wikipedia.org">Learn more on Wikipedia</a>

Always include the https:// part. If you leave it out, the browser will treat it as a file on your own site and the link will break. The text you put between the tags should tell the reader where the link goes or why they should click it — "Learn more on Wikipedia" is clearer than "click here".

Linking to pages on your own site

When you link to another page on your own website, you do not need the full web address. Instead, use a relative path — the file name or folder structure relative to where you are now.

If you have a file called about.html in the same folder as your current page, link to it like this:

<a href="about.html">About us</a>

If the file is in a subfolder called pages, use:

<a href="pages/about.html">About us</a>

If you need to go up one level (to the parent folder), use ../:

<a href="../index.html">Home</a>

Relative paths are shorter and make your site portable — you can move the whole folder to a different location and the links still work.

Opening a link in a new tab

By default, clicking a link replaces the current page with the new one. If you want the link to open in a new tab instead, add the target="_blank" attribute:

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

This is useful when you are linking to another website and want to keep your own page open. Many sites use this for external links so readers do not lose their place. You can also add rel="noopener noreferrer" for security reasons — it prevents the new page from accessing certain information about your site:

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

Email and phone number links

You can create links that open the reader's email client or phone app by using special href values. For email, use mailto: followed by the address:

<a href="mailto:contact@example.com">Send us an email</a>

For phone numbers, use tel: followed by the number with a plus sign and country code:

<a href="tel:+1-555-0123">Call us</a>

On a mobile device, clicking a phone link dials the number automatically. On a desktop, it opens the default email or phone app if one is installed. You can also add a subject line to email links by appending ?subject=:

<a href="mailto:contact@example.com?subject=Question about pricing">Email us</a>

Linking to a specific part of a page

You can link directly to a heading or section within a page by using an id attribute and a hash symbol. First, give the section an id:

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

Then link to it using the hash and the id name:

<a href="#pricing">Jump to pricing</a>

You can also link to a section on another page by combining the file name and the id:

<a href="pages/services.html#contact">Contact us</a>

This is useful for long pages where you want to let readers jump straight to the section they care about.

Styling links with CSS

By default, links appear blue and underlined. You can change their appearance with CSS. The most common approach is to use the a selector to style all links, or create a class for specific links:

a { color: green; text-decoration: none; }

This makes all links green and removes the underline. You can also style links differently depending on whether they have been visited, hovered over, or clicked. The :hover pseudo-class lets you change the style when the reader's mouse is over the link:

a:hover { color: darkgreen; text-decoration: underline; }

The :visited pseudo-class styles links the reader has already clicked, and :active styles them while being clicked. Keep in mind that removing the underline or changing the color too much can make links hard to spot — readers expect links to look clickable.

Frequently Asked Questions

What is the difference between href and src?

href is used in the <a> tag to link to another page or resource. src is used in tags like <img> and <script> to load a file directly into the page. Links let readers choose to navigate; src loads content automatically.

Can I make an image into a link?

Yes. Wrap the <img> tag inside an <a> tag: <a href="page.html"><img src="image.jpg" alt="description"></a>. Clicking the image will follow the link.

Why does my link to another website not work?

The most common reason is forgetting https:// at the start of the web address. Without it, the browser treats it as a file on your own site. Check that your href starts with https:// or http://.

How do I link to a PDF or download file?

Use the same <a> tag with the file name in the href: <a href="document.pdf">Download PDF</a>. The browser will either open the file or prompt the reader to download it, depending on their settings.

What does rel="noopener noreferrer" do?

noopener prevents the new page from accessing the window.opener object, which could let it control your page. noreferrer hides the referring page from the server logs of the site being linked to. Use both when linking to untrusted external sites with target="_blank".