The Basic Link Tag: <a> and href

A link in HTML uses the <a> tag with an href attribute that points to where you want to send the reader. The text between the opening and closing tags is what appears clickable on the page.

Here is the simplest form:

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

When a browser displays this, the reader sees "Click here" as a blue underlined link. Clicking it takes them to https://example.com. The href value can be a full web address, a page on your own site, or even an email address.

Key Takeaways

  • Every link starts with <a href="destination"> and ends with </a>, with the clickable text in between.
  • Use full web addresses (https://example.com) for external sites and relative paths (about.html) for pages on your own site.
  • Email links use href="mailto:name@example.com" and phone links use href="tel:+1-555-0123" to trigger the user's email or phone app.
  • The target="_blank" attribute opens a link in a new tab instead of replacing the current page.
  • Link text should describe where the link goes, not say "click here" or "link".

External Links vs. Links Within Your Own Site

An external link points to a website you do not control. Always use the full address starting with http:// or https://:

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

A relative link points to another page on your own site. If you have a file called about.html in the same folder, you can link to it without typing the full web address:

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

If the page is in a subfolder called pages, use a forward slash:

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

Relative links are shorter and let you move your entire site to a new web address without rewriting every link.

Opening Links in a New Tab

By default, clicking a link replaces the current page. If you want the link to open in a new tab instead, add target="_blank":

<a href="https://example.com" target="_blank">Open in new tab</a>

This is useful when linking to external sites, so readers do not lose their place on your page. Use it sparingly — most readers expect links to behave the normal way, and forcing new tabs can feel annoying.

Email and Phone Links

You can create a link that opens the user's email app or phone dialer. An email link uses mailto: followed by the address:

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

A phone link uses tel: followed by the number with a plus sign and country code:

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

On a mobile phone, clicking a tel: link dials the number. On a desktop, it may open an email or messaging app depending on what the user has set up. Email and phone links work best when you want readers to contact you directly rather than navigate to another page.

Linking to a Specific Part of a Page

You can link directly to a heading or section within a page using an anchor. First, give the section an id attribute:

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

Then link to it using a hash symbol followed by the id:

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

This works on the same page. To link to a section on a different page, combine the page name with the anchor:

<a href="about.html#team">Meet the team</a>

Anchor links are useful in long pages or when you want to send someone directly to the information they need.

Writing Link Text That Works

The words you put between <a> and </a> matter. Avoid vague phrases like "click here" or "link". Instead, describe what the reader will find:

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

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

Clear link text helps readers understand where they are going before they click. It also helps people using screen readers, who often jump from link to link without reading the surrounding text. If your link text makes sense on its own, it works for everyone.

Common Mistakes to Avoid

Forgetting the closing </a> tag is the most common error. Without it, everything after the opening tag becomes a link, which breaks your page layout.

Using the wrong quote style causes problems too. HTML expects straight quotes (" "), not curly quotes (" "). If you copy and paste from a word processor, check that your quotes are straight.

Typing the href value wrong is straightforward. Double-check that external links start with https://, that relative links use forward slashes (not backslashes), and that email addresses have the @ symbol. A single typo breaks the link silently — the page looks fine, but clicking does nothing.

Frequently Asked Questions

Can I put an image inside a link tag?

Yes. Put an <img> tag between the <a> and </a> tags: <a href="home.html"><img src="logo.png" alt="Home"></a>. This makes the image clickable. Always include alt text on the image so screen readers know what it is.

What is the difference between href and src?

href is used in links (<a> tags) to point to a destination. src is used in images (<img> tags) to point to the image file. They do the same job in different contexts — both tell the browser where to find something.

How do I link to a PDF or read a file?

Use the same link tag with the file path in href: <a href="document.pdf">read PDF</a>. When clicked, most browsers read the file instead of opening it. If you want the file to open in the browser first, add target="_blank".

Do I need to include www in the web address?

No. Modern browsers find the site with or without www. Use https://example.com or https://www.example.com — both work. Pick one and stay consistent throughout your site.

What does the # symbol do in a link?

The # symbol tells the browser to jump to a specific section of the page using an anchor id. #pricing jumps to the element with id="pricing". Without the #, the browser treats it as a regular file name and looks for a page called pricing.