The Basic Link Tag

A link in HTML uses the <a> tag, which stands for "anchor". The tag wraps around the text you want to be clickable, and an href attribute tells the browser where to send the reader when they click. Here is the simplest form:

<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, the browser loads the page at https://www.example.com. The href value can be a full web address, a relative path to another file on your site, or even an email address. Every link you create will follow this same basic structure: an opening tag with href, the clickable text in the middle, and a closing tag.

Key Takeaways

  • Every link needs an opening <a> tag with an href attribute and a closing </a> tag around the clickable text.
  • Use full web addresses (https://example.com) for external sites and relative paths (pages/about.html) for files on your own site.
  • The target="_blank" attribute opens a link in a new tab instead of replacing the current page.
  • Email links use href="mailto:address@example.com" and phone links use href="tel:+1234567890".
  • Anchor links jump to a specific section on the same page using href="#section-name" paired with an id attribute on the target element.

External Links vs. Relative Links

An external link points to a page on a different website. Always include the full address starting with http:// or https://. The https:// version is more secure and is now standard:

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

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

<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/contact.html">Contact</a>

Relative links are shorter and easier to maintain because they do not depend on your domain name. If you move your site to a different domain, all relative links continue to work without changes.

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">Open in new tab</a>

This is useful when linking to external sites so the reader does not lose their place on your page. Many sites use this for outbound links, though some readers find it annoying because it removes their control over how pages open. Use it thoughtfully and only when there is a real reason to keep the original page visible.

Email and Phone Links

You can create a link that opens the reader's email program or phone app. For email, use mailto: followed by the address:

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

For phone numbers, use tel: followed by the number. Include the plus sign and country code for international numbers:

<a href="tel:+14155552671">Call us</a>

On a mobile device, clicking a tel: link dials the number automatically. On a desktop, it usually opens the default email or phone application if one is installed. These special link types are particularly useful on contact pages where you want readers to reach you quickly.

Jumping to a Section on the Same Page

An anchor link jumps to a specific part of the same page. This requires two pieces: a link with a hash symbol (#) and an id attribute on the target element. First, mark the section you want to jump to by giving it an id:

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

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

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

When the reader clicks this link, the page scrolls to the element with id="pricing". This is common in long pages with a table of contents at the top, or in navigation menus that jump to different sections. Anchor links improve navigation without requiring the reader to scroll manually through the entire page.

Common Mistakes to Avoid

The most frequent error is forgetting the closing </a> tag. Without it, everything after the opening tag becomes a link, which is rarely what you want. Always check that every opening tag has a matching closing tag by reviewing your code carefully.

Another mistake is using spaces or special characters in id names. Stick to letters, numbers, hyphens, and underscores. An id like id="section 1" or id="what's-new" will cause problems. Use id="section-1" or id="whats-new" instead.

When linking to files on your own site, make sure the path is correct. If you get the folder structure wrong, the link will break. Test every relative link by clicking it to confirm it works before you publish your page.

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 tags like <img> and <script> to load an image or script file. They serve different purposes and are not interchangeable.

Can I use an image as a link?

Yes. Wrap the <img> tag inside the <a> tag: <a href="page.html"><img src="image.jpg" alt="description"></a>. When the reader clicks the image, it behaves like a link.

How do I style a link with CSS?

Use CSS selectors like a { color: blue; } to change link color, or a:hover { color: red; } to change the color when the mouse hovers over it. You can also remove the underline with text-decoration: none; if you prefer a different appearance.

What does the title attribute do?

The title attribute adds a tooltip that appears when the reader hovers over the link: <a href="page.html" title="Go to our about page">About</a>. This is optional and mainly helps with accessibility and user experience.

Can I link to a PDF or other file type?

Yes. Use the href to point to the file just as you would a web page: <a href="documents/guide.pdf">Download our guide</a>. The browser will either display the file or prompt the reader to download it, depending on their settings.