The basic link tag and what each part does

A link in HTML uses the <a> tag, which stands for "anchor". The tag has two essential parts: the opening tag with an href attribute that points to where you want to go, and the closing tag that wraps the text the reader will click.

Here is the simplest working link:

<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. When they click it, the browser opens https://www.example.com. The href attribute is what tells the browser where to send them — without it, the tag does nothing.

Key Takeaways

  • Every link needs an opening <a> tag with an href attribute, clickable text, and a closing </a> tag.
  • Links to other websites must start with http:// or https://, but links to pages on your own site do not.
  • You can link to a specific section of a page by adding a # and the section's id attribute to the URL.
  • The text between the opening and closing tags should describe where the link goes, not say "click here".

Linking to other websites

When you link to a website you do not own, you must include the full web address starting with https:// (or http:// for older sites, though https is now standard). This is called an absolute URL.

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

If you forget the https:// part, the browser will treat it as a link to a page on your own site and the link will break. This is one of the most common mistakes when you are first learning.

Linking to pages on your own site

When you link to another page on the same website, you do not need the full web address. You only need the file path, called a relative URL. If both pages are in the same folder, you only need the filename:

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

If the page you are linking to is in a subfolder, include the folder name:

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

If the page is in a parent folder (one level up), use two dots and a slash:

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

Linking to a specific section on a page

You can link not just to a page, but to a specific heading or section within that page. First, the section you want to link to needs an id attribute:

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

Then, in your link, add a # followed by that id:

<a href="https://www.example.com/services.html#pricing">See our pricing</a>

You can also link to a section on the same page by using just the # and the id, with no filename:

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

Opening a link in a new tab

By default, a link opens in the same tab or window. If you want the link to open in a new tab instead, add the target attribute with the value _blank:

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

This is useful when you are linking to an outside website and you want the reader to stay on your page. Without it, clicking the link takes them away from your site entirely.

Writing link text that makes sense

The words between the opening and closing <a> tags should tell the reader where the link goes. Avoid generic phrases like "click here" or "read more". Instead, be specific about the destination:

Weak: <a href="guide.pdf">Click here</a> for our beginner's guide.

Better: Read our <a href="guide.pdf">beginner's guide</a>.

Good link text helps readers understand where they are going before they click, and it also helps search engines understand what your page is about. Screen readers used by people with vision loss read the link text aloud, so descriptive text makes your site more usable for everyone.

Common mistakes and how to fix them

The most frequent error is forgetting https:// when linking to another website. The browser will look for a page called "www.example.com" on your own site instead of going to the actual website.

Another common mistake is using the wrong path for links on your own site. If your link does not work, check that the filename matches exactly — including capitalization and the .html extension — and that the folder path is correct. Test the link in your browser to see if it goes where you expect.

A third mistake is forgetting the closing </a> tag. Without it, everything after the opening tag becomes a link, which is usually not what you want. Always close your tags.

Frequently Asked Questions

Can I put an image inside a link tag?

Yes. Put an <img> tag between the opening and closing <a> tags: <a href="page.html"><img src="image.jpg" alt="description"></a>. When the reader clicks the image, they go to the page specified in the href.

What is the difference between href and src?

The href attribute is used in <a> tags and tells the browser where to navigate when the link is clicked. The src attribute is used in <img> tags and tells the browser where to find the image file to display. They serve different purposes in different tags.

How do I link to an email address?

Use mailto: before the email address: <a href="mailto:contact@example.com">Email us</a>. When clicked, this opens the reader's default email program with your address already filled in.

Do I need to add www to a website URL?

Not always. Most modern websites work with or without www, so https://example.com and https://www.example.com usually go to the same place. If you are unsure, check the website in your browser first to see which version it uses.