The anchor tag makes text or images clickable

A link in HTML is created with the anchor tag, written as <a>. The anchor tag wraps around the text or image you want to be clickable, and an href attribute tells the browser where to send the reader when they click.

The simplest link looks like this:

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

When a browser displays this, the reader sees the words "Click here" in blue, underlined text. When they click it, the browser opens https://www.example.com. The href is the destination — it can be another website, a page on your own site, an email address, or a file to read.

Key Takeaways

  • The anchor tag <a> with an href attribute creates a clickable link, and the text between the opening and closing tags is what the reader sees.
  • External links to other websites must include the full web address starting with http:// or https://, while links to pages on your own site use just the file name or path.
  • You can link to an email address by using href="mailto:name@example.com", which opens the reader's email program when clicked.
  • Links can wrap around images, text, or both, and the href attribute works the same way regardless of what sits between the tags.
  • The target="_blank" attribute opens the link in a new browser tab instead of replacing the current page.

Linking to external websites

When you link to a website you do not own, you must use the complete web address in the href. This address is called a URL and always starts with http:// or https://.

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

The https:// part tells the browser this is a web address. Without it, the browser will treat it as a file on your own computer and the link will break. Copy the full address from your browser's address bar to make sure you have it right.

If you want the link to open in a new tab instead of replacing the current page, add target="_blank" to the tag:

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

Linking to pages on your own website

When you link to another page on your own site, you do not need the full web address. Instead, use just the file name or the path to the file.

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

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

If the file is in a subfolder called pages, use a forward slash to show the path:

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

This is called a relative link because it describes the location of the file relative to where you are now. Relative links are shorter and make it easier to move your entire website to a new location without breaking all your links.

Creating a link to an email address

To create a link that opens the reader's email program, use mailto: followed by the email address:

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

When a reader clicks this link, their default email program opens with a new message addressed to contact@example.com. The reader still has to type the message and send it themselves — the link just opens the program and fills in the recipient.

You can also add a subject line that will appear in the email:

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

Wrapping links around images

An image can be clickable just like text. Put an image tag inside the anchor tag:

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

When a reader clicks the image, the browser goes to the URL in the href. This is how many websites make their logo clickable — clicking it takes you back to the home page.

The image tag itself still needs an src attribute (the file name) and an alt attribute (a description for people using screen readers). The anchor tag wraps around the whole image tag and provides the destination.

Using anchor links to jump within a page

You can create a link that jumps to a specific section of the same page by using an id attribute and a hash symbol. First, give a heading or section an id:

<h2 id="contact">Contact Us</h2>

Then create a link that points to that id using a hash:

<a href="#contact">Jump to contact section</a>

When a reader clicks this link, the page scrolls down to the heading with id="contact". This is useful on long pages where you want to let readers jump to the section they care about without scrolling.

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

<a href="about.html#team">See our team</a>

Common mistakes that break links

The most common mistake is forgetting http:// or https:// on external links. Without it, the browser thinks you are linking to a file on your own computer and the link will not work.

Another mistake is mistyping the file name or path. If your file is called about.html but you write href="aboutus.html", the link will break because the browser cannot find a file with that name. File names are case-sensitive on most web servers, so About.html and about.html are treated as different files.

If you use an id for an anchor link, make sure the id exists on the page. If you write href="#team" but there is no element with id="team" anywhere on the page, clicking the link will not jump anywhere.

Frequently Asked Questions

What is the difference between href and src?

href is used in anchor tags to specify where a link goes, while src is used in image tags to specify which image file to display. They serve different purposes — href is for links, src is for images and other embedded content.

Can I link to a PDF or Word document?

Yes. Use the file name in the href just as you would for an HTML file: <a href="document.pdf">read PDF</a>. When a reader clicks it, the browser will either open the file or prompt them to read it, depending on their browser settings.

How do I make a link open in a new tab?

Add target="_blank" to the anchor tag: <a href="https://example.com" target="_blank">Visit site</a>. This opens the link in a new tab instead of replacing the current page.

What does the # symbol do in a link?

The # symbol tells the browser to jump to a specific section of a page using an id. For example, href="#contact" jumps to the element with id="contact". It is called an anchor link or fragment identifier.

Why is my link not working?

Check that the href is spelled correctly and matches the actual file name or web address. For external links, make sure you included http:// or https://. For internal links, verify the file exists in the folder you specified. For anchor links, confirm the id exists on the page.