HTML Links: Complete Guide to Anchor Tags

Links are what turn a bunch of separate HTML pages into an actual website. Without them every page would be an isolated island with no way to navigate between them. In this post we are getting hands on with the anchor tag (<a>) and covering every practical way you will use it in real projects  internal links external links email links phone links and more. Lets jump straight into building things.

Quick Theory: The Anatomy of a Link

Every link is built using the <a> tag along with an href attribute which tells the browser where the link should take the user.

<a href="destination">Clickable Text</a>

That's really the only theory you need to get started. Everything else is just variations on this basic pattern, which we'll explore through practical examples.

Practical: Linking to an External Website

<p>Check out <a href="https://www.wikipedia.org">Wikipedia</a> for more information.</p>

Try this in your test file and click the link once opened in a browser. Notice that clicking it takes you away from your page entirely replacing it with Wikipedia. This is standard behavior for external links unless you tell the browser to do something different, which we'll cover next.

Practical: Opening a Link in a New Tab

<p>Read the full <a href="https://www.wikipedia.org" target="_blank">article here</a>.</p>

Add target="_blank" to the tag and test it again -this time the link opens in a brand new tab instead of navigating away from your current page. This is commonly used for external links so users do not lose their place on your site.

Security Tip: Add rel="noopener noreferrer"

<a href="https://www.wikipedia.org" target="_blank" rel="noopener noreferrer">Visit Wikipedia</a>

When using target="_blank" its considered best practice to also add rel="noopener noreferrer". This prevents the newly opened page from being able to access and manipulate your original page through JavaScript which is a real (if uncommon) security risk. Get into the habit of adding this any time you use target="_blank".

Practical: Linking to Another Page on Your Own Site

Imagine you have two files in the same folder: index.html and about.html. Heres how you'd link between them:

<!-- Inside index.html -->
<a href="about.html">About Us</a>

<!-- Inside about.html -->
<a href="index.html">Back to Home</a>

Try creating these two actual files on your computer in the same folder add this linking code and click between them in your browser. This is called a relative link  it points to a file relative to the current pages location without needing a full web address.

Try This: Linking Through Folders

Now imagine about.html is inside a subfolder called pages while index.html stays in the main folder. The link from index.html would look like this:

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

And to link back from inside that subfolder up to the main folder you'd use ../ to go up one level:

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

Create this folder structure on your own computer and test both directions. Understanding relative paths like this is essential once your site grows beyond a single file.

Practical: Linking to a Specific Section on the Same Page

This is one of the more useful link types and is used constantly for "jump to section" navigation. It requires two steps.

Step 1: Give the target section an id.

<h2 id="contact">Contact Us</h2>
<p>You can reach us at contact@example.com.</p>

Step 2: Link to that id using a hashtag.

<a href="#contact">Jump to Contact Section</a>

Try building a full page with this pattern:

<a href="#about">Go to About</a>
<a href="#services">Go to Services</a>
<a href="#contact">Go to Contact</a>

<h2 id="about">About</h2>
<p>We are a small design studio.</p>

<h2 id="services">Services</h2>
<p>We offer branding, web design, and print design.</p>

<h2 id="contact">Contact</h2>
<p>Email us at hello@example.com.</p>

Save this and open it in a browser  clicking each link at the top should instantly jump you down to the matching section. This is exactly how single page navigation menus work on real websites.

Practical: Email Links with mailto:

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

Clicking this link opens the users default email application with the "To" field already filled in. Try adding a pre-filled subject line too:

<a href="mailto:hello@example.com?subject=Website%20Inquiry">Email Us About Your Project</a>

Notice the %20 in the subject  thats how spaces are encoded in URLs. Test this in your browser (note that it will only work correctly if you have an email client configured on your device).

Practical: Phone Links with tel:

<a href="tel:+15551234567">Call us: (555) 123-4567</a>

This is especially useful on mobile devices  tapping this link will offer to dial the number directly. Its a small addition that makes a real difference on a business or contact page.

Practical: Turning an Image into a Link

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

Try this with any image file you have. Simply wrapping an <img> tag inside an <a> tag makes the entire image clickable  this is exactly how logo links to the homepage work on nearly every website you visit.

Practical: Building a Simple Navigation Menu

Lets combine what we've learned into something that resembles a real site navigation bar:

<nav>
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
  <a href="services.html">Services</a>
  <a href="contact.html">Contact</a>
</nav>

Try creating four separate HTML files with these exact names, paste this navigation block into all four and click through them in your browser. This is essentially how every multi page website handles navigation at its core before any styling is added.

Practical: A Complete Mini Page with All Link Types

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contact - Bright Design Studio</title>
</head>
<body>

  <h1>Bright Design Studio</h1>

  <nav>
    <a href="index.html">Home</a>
    <a href="#contact">Contact</a>
  </nav>

  <p>Learn more about design trends on <a href="https://www.smashingmagazine.com" target="_blank" rel="noopener noreferrer">Smashing Magazine</a>.</p>

  <h2 id="contact">Contact Us</h2>
  <p>Email: <a href="mailto:hello@brightdesign.com">hello@brightdesign.com</a></p>
  <p>Phone: <a href="tel:+15551234567">(555) 123-4567</a></p>

</body>
</html>

Build this exact file and test every single link - the internal navigation, the external link opening in a new tab the jump to section link the email link and the phone link. Getting all five working correctly in one page is a great milestone.

Mistake to Avoid: Broken or Missing href

<!-- Don't do this -->
<a>Click here</a>

Without an href attribute, this isn't a functional link at all it wo not be clickable and wo not show the typical link styling. Always double-check that your href is present and points to a real correctly spelled destination.

Mistake to Avoid: Vague Link Text

<!-- Avoid this -->
<p>To learn more about our services, <a href="services.html">click here</a>.</p>

<!-- Better -->
<p>Learn more about <a href="services.html">our design services</a>.</p>

Phrases like "click here" don't tell users or search engines anything about where the link goes. Screen reader users, in particular, often navigate a page by jumping from link to link so descriptive link text makes a real difference in accessibility, and it also helps SEO since search engines use link text as a ranking signal.

Your Turn: Practice Exercise

1. Create three HTML files: index.html, about.html and contact.html.
2. Add a navigation menu with links between all three pages present on every page.
3. On the contact page add a working mailto: link and a tel: link.
4. On the homepage add one external link that opens in a new tab with proper rel attributes.
5. Add at least one "jump to section" link using an id and a hashtag link.
6. Test every link by clicking through all of them in your browser.

Conclusion

Anchor tags are what connect individual pages into an actual, navigable website. If you built the examples in this post, you've now practiced internal links external links section jumps email links phone links, and image links - covering nearly every real-world use case you'll run into. In the next post we will look at "HTML Images: How to Add and Optimize Images" where we will go deeper into the <img> tag image formats and performance best practices.