The Basic Link Tag

To add a link in HTML, you use the <a> tag with an href attribute. The href attribute tells the browser where to go when someone clicks the link. Here is the simplest form:

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

The text between the opening <a> and closing </a> tags is what the reader sees and can click on. The URL goes inside the quotation marks after href=. When someone clicks "Click here", the browser takes them to example.com.

You can put a link anywhere text appears on your page — inside a paragraph, in a list, or even around an image. The browser will usually show it in blue and underlined by default, though you can change that with CSS.

Key Takeaways

  • Every link starts with <a href="URL"> and ends with </a>, with the clickable text in between.
  • Use the full web address (https://www.example.com) for external sites, or just the file name (about.html) for pages on your own site.
  • The target="_blank" attribute opens the link in a new tab instead of replacing the current page.
  • You can link to a specific section of a page using a hash symbol and an id attribute, like href="#section2".

External Links vs. Internal Links

An external link points to a website you do not own. You must use the full web address, starting with http:// or https://. The https:// version is more secure and is what most sites use now.

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

An internal link points to another page on your own website. You only need the file name or the path to the file, not the full web address. If you have a file called about.html in the same folder, you write:

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

If the file is in a subfolder called pages, you write:

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

Opening Links 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</a>

This is useful when you link to external sites and want readers to stay on your page. Many sites use this for links to social media, news articles, or other outside resources. The reader can then switch back to your page without losing their place.

Linking to a Specific Section on a Page

You can link directly to a specific part of a page using an id attribute and a hash symbol (#). First, give the section you want to link to an id:

<h2 id="section2">The Second Section</h2>

Then create a link that points to that id:

<a href="#section2">Jump to Section 2</a>

When someone clicks this link, the page scrolls down to the heading with id="section2". You can use this to link to a section on the same page or on a different page. To link to a section on another page, combine the file name with the hash:

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

Linking to Email Addresses

To create a link that opens the reader's email program, use mailto: instead of a web address:

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

When someone clicks this link, their default email program opens with the address already filled in. You can also add a subject line by including ?subject= after the email address:

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

Replace the spaces in the subject with %20 if your email program does not handle spaces correctly.

Common Mistakes to Avoid

The most common mistake is forgetting the href attribute entirely. Writing <a>Click here</a> without href= creates text that looks like a link but does not go anywhere.

Another mistake is using just the domain name for external links. Writing href="example.com" instead of href="https://www.example.com" will not work — the browser needs the https:// part to know it is a web address.

Do not forget the closing </a> tag. If you leave it out, everything after the link becomes clickable, which is usually not what you want. Always check that your opening and closing tags match.

If you are linking to a file on your own site and the link does not work, check the file path. Make sure the file name matches exactly, including capitalization and the file extension (.html, .pdf, etc.). Paths are case-sensitive on most web servers.

Frequently Asked Questions

Can I put an image inside a link tag?

Yes. Put the <img> tag inside the <a> tag: <a href="page.html"><img src="image.jpg" alt="description"></a>. Now the image is clickable and acts as a link. This is how many sites create clickable logos or thumbnail galleries.

What is the difference between href and src?

href is used in link tags (<a>) and tells the browser where to go. src is used in image tags (<img>) and tells the browser where to find the image file. They do the same job for different elements.

How do I link to a PDF file?

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

Can I style a link with CSS?

Yes. You can change the color, remove the underline, add hover effects, and more using CSS. Common selectors are a (all links), a:hover (when the mouse is over it), and a:visited (links already clicked). This is covered in CSS guides on this site.

What does the rel attribute do?

The rel attribute tells the browser the relationship between your page and the linked page. rel="nofollow" tells search engines not to count this as a vote for the other site. rel="noopener noreferrer" adds security when using target="_blank".