The basic HTML link uses an anchor tag with an href attribute

To embed a link in a webpage, you write an anchor tag — the HTML element that turns text or images into clickable links. The simplest form looks like this:

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

The href attribute holds the web address you want to link to. The text between the opening and closing tags is what appears on the page for the reader to click. When someone clicks that text, their browser goes to the URL in the href.

The href can point to a full web address (called an absolute URL), a page within your own site (a relative URL), or even an email address or phone number. Each type uses a slightly different format, but the anchor tag structure stays the same.

Key Takeaways

  • An anchor tag with href="URL" is the HTML element that creates a clickable link, with the visible text between the opening and closing tags.
  • Absolute URLs include the full web address starting with http:// or https://, while relative URLs point to pages within your own site using just the file path.
  • You can link to email addresses using href="mailto:address@example.com" and phone numbers using href="tel:+1234567890".
  • The target="_blank" attribute opens a link in a new browser tab instead of replacing the current page.
  • Links to files like PDFs or downloads work the same way as web links — just point the href to the file path.

Absolute URLs: linking to other websites

An absolute URL is the complete web address, starting with http:// or https://. Use this when you want to link to a page on a different website.

<a href="https://www.wikipedia.org">Visit Wikipedia</a>

Always include the https:// part — without it, the browser may treat the link as a relative URL and look for a folder on your own site instead of going to the other website. Most modern websites use https (the secure version) rather than http, so check the address bar of the site you are linking to and match what you see there.

Relative URLs: linking within your own site

A relative URL points to another page on your own website without repeating the domain name. This is shorter to write and more portable — if you move your site to a different domain, relative links still work.

If your site structure looks like this:

  • index.html (your home page)
  • about.html (in the same folder)
  • blog/post1.html (in a subfolder called blog)

Then from index.html, you would link to about.html like this:

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

And to link to the blog post from index.html, you go up into the blog folder:

<a href="blog/post1.html">Read our first post</a>

If you need to go up one level (to a parent folder), use ../ before the filename. Relative URLs are case-sensitive on most web servers, so blog/post1.html is not the same as blog/Post1.html.

Opening links in a new tab with target="_blank"

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">Open in new tab</a>

This is useful when you are linking to an external site and want the reader to stay on your page. Many sites use this for outbound links, though some users find it annoying because it changes their browsing experience without asking. Use it thoughtfully — it is not necessary for every external link.

Linking to email addresses and phone numbers

You can create a link that opens the reader's email client or phone dialer by using special URL schemes. For email, use mailto: followed by the address:

<a href="mailto:contact@example.com">Email us</a>

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

<a href="tel:+14155552671">Call us</a>

On a mobile device, a tel: link will dial the number. On a desktop, it may open the default phone or messaging app, or do nothing if no app is configured. The mailto: link works on any device with email set up.

Linking to files and downloads

To link to a PDF, image, or other downloadable file, point the href to the file path the same way you would for a web page:

<a href="documents/guide.pdf">Download our guide</a>

When someone clicks this link, the browser will either display the file (if it can — PDFs usually open in the browser) or prompt the reader to download it. If you want to force a download instead of opening the file in the browser, add the download attribute:

<a href="documents/guide.pdf" download>Download our guide</a>

You can also specify a custom filename for the download by adding a value to the download attribute: download="my-guide.pdf". This is helpful when the original filename is unclear or when you want the downloaded file to have a different name than the one on your server.

Linking images and other elements

You are not limited to linking text. You can wrap any HTML element in an anchor tag to make it clickable — images are the most common example:

<a href="https://www.example.com"><img src="logo.png" alt="Company logo"></a>

When someone clicks the image, they go to the URL in the href. This is how logo images on websites usually work — clicking the logo takes you back to the home page. You can also link buttons, headings, or entire sections of content by wrapping them in an anchor tag.

Frequently Asked Questions

What is the difference between http and https?

HTTPS is the secure version of HTTP — it encrypts the data sent between your browser and the website. Most modern websites use HTTPS. When you link to another site, match what appears in the address bar. If the site uses HTTPS, use https:// in your link.

Can I link to a specific part of a page?

Yes, using an anchor with an id. First, mark the target location with <h2 id="section2">Section 2</h2>. Then link to it with <a href="#section2">Jump to section 2</a>. The # tells the browser to look for an id on the same page. For external pages, use the full URL plus the anchor: href="page.html#section2".

What happens if the URL in my href is wrong?

The link will still appear clickable, but clicking it will show a 404 error or take the reader to the wrong page. Always test your links after you publish them. Browser developer tools can help you spot broken links — right-click the page, select Inspect, and look for any console errors.

Do I need to add www to the beginning of a URL?

Not always. Most websites work with or without www — the server is configured to handle both. Check the address bar of the site you are linking to and use what you see there. Both href="https://example.com" and href="https://www.example.com" usually work, but matching the site's own URL is safest.