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

A link in HTML starts with the <a> tag and ends with </a>. The destination goes inside the href attribute. The text between the opening and closing tags is what appears clickable on the page.

Here is the simplest working example:

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

When someone visits your page, they see the words "Click here" in blue and underlined. Clicking it takes them to example.com. The href can point to another website, a page on your own site, or a file to read.

Key Takeaways

  • Every link needs an opening <a> tag with an href attribute, the clickable text, and a closing </a> tag.
  • Use the full web address (https://www.example.com) for external sites and just the filename (about.html) for pages on your own site.
  • The text between the tags should tell the reader where the link goes, not just say "click here".
  • You can link to a specific section of a page by adding a hash and the section's id attribute (href="#section-name").

Linking to pages on your own website

When you link to another page on the same website, you do not need the full web address. Use just the filename or the path from your current folder.

If your site has a file called about.html in the same folder as your current page, write:

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

If about.html is in a subfolder called pages, write:

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

If you need to go up one folder level, use two dots and a slash:

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

Relative links (the short paths) are better than full web addresses for internal pages because they keep working if you move your site to a different domain.

Writing link text that describes where it goes

The words you put between <a> and </a> matter more than most people think. Screen readers read that text aloud to people who cannot see the page. Search engines use it to understand what the link is about. Visitors scan it to decide whether to click.

Bad link text: <a href="pricing.html">Click here</a>

Good link text: <a href="pricing.html">View our pricing</a>

Bad link text: <a href="contact.html">Link</a>

Good link text: <a href="contact.html">Contact us</a>

The link text should answer the question "where does this go?" on its own, without the reader having to look at surrounding sentences.

Linking to a specific section within a page

You can link directly to a heading or section instead of just the top of a page. This requires two pieces: an id attribute on the section you want to link to, and a hash symbol in the href.

First, add an id to the section. If you have a heading that says "Pricing Plans", add id="pricing-plans" to it:

<h2 id="pricing-plans">Pricing Plans</h2>

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

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

If the section is on a different page, combine the filename and the hash:

<a href="services.html#pricing-plans">View pricing</a>

The id name should use lowercase letters, numbers, and hyphens — no spaces or special characters.

Opening a link in a new tab or window

By default, a link opens in the same tab. To open it in a new tab instead, add target="_blank" to the tag:

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

This is useful when you link to external websites and want visitors to stay on your page. It is less useful for links to other pages on your own site, because it can confuse navigation.

When you use target="_blank", also add rel="noopener noreferrer" for security:

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

This prevents the new page from accessing certain information about your site.

Linking to email addresses and phone numbers

You can create a link that opens the visitor's email program or phone app instead of loading a web page. For email, use mailto: before the address:

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

For phone numbers, use tel: before the number:

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

The phone number should include the country code (the +1 for the United States) and hyphens between sections. On a mobile device, clicking a tel: link dials the number automatically. On a desktop, it may open the visitor's phone app or do nothing, depending on their setup.

Common mistakes to avoid

Forgetting the closing tag is the most common error. Every <a> tag must have a matching </a> at the end. If you forget it, everything after the link becomes clickable.

Misspelling the href attribute is another frequent problem. It must be spelled exactly href, not href, hrf, or anything else. The browser will ignore a misspelled attribute and the link will not work.

Using spaces in filenames causes trouble. If your file is called "about page.html" with a space, the link may not work on all servers. Use hyphens or underscores instead: about-page.html or about_page.html.

Linking to a file that does not exist will show a 404 error when someone clicks. Double-check that the filename and path are spelled exactly as they appear in your file system, including uppercase and lowercase letters.

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 the <img> tag to load an image file. They do the same job (pointing to a file) but are used in different HTML tags.

Can I make an image into a link?

Yes. Put the <img> tag inside the <a> tag: <a href="page.html"><img src="image.jpg" alt="description"></a>. Clicking the image takes the visitor to the page specified in href.

How do I link to a PDF or downloadable file?

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

Why is my link not working?

Check that the href spelling is correct, the file exists at that path, and you closed the tag with </a>. Test the link in a browser. If it still does not work, open your browser's developer tools (usually F12) and look at the console for error messages.

Do I need to include www in the web address?

No. Modern browsers automatically add www if needed. Both href="https://example.com" and href="https://www.example.com" work the same way. Including https:// is more important than including www.