🔗 Creating Links with the <a> Tag - Linking Web Pages

📅 August 12, 2025

✍️ By Evans

Hey! 👋

Today I finally learned how to add links to my HTML pages — you know, the kind you click to visit another page or website. This might seem small, but it's actually a big deal when building a real website.

Let me show you what I discovered about the <a> tag, which is the anchor tag used for linking.

🧱 Basic Link Structure

Here's how a basic link works in HTML:

<a href="https://www.google.com"> Visit Google</a>
                            

• <a> is the anchor tag.
• The href attribute means Hypertext REFerence — it tells the browser where the link should go.
• The text inside the tag ("Visit Google") is what people will click on.

🔗 Linking to Other Websites

You can also link to other pages in your own website.

For example, if you have another file named about.html, you can link to it like this:

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

When clicked, it'll open your About Me page in the same tab.

🧭 Opening Links in a New Tab

Sometimes you want a link to open in a new browser tab — especially if it's an external website. To do that, add the target="_blank" attribute.

<a href="https://www.switzcodes.com" target="_blank"> Visit SwitzCodes</a>
                        

That extra attribute tells the browser, “Open this link in a new tab.”

📞 Link to Email or Phone Number

Yup, you can even make a link that sends an email or calls a number!

<a href="href="mailto:evans@example.com">">Email Me</a>
<a href="tel:+2348000000000">">Call Me</a>
                        

Clicking the email one opens your mail app, and the phone one works on phones.

⚠️ Common Mistakes I Made

• ❌ Forgetting to include http:// or https:// for external links
• ❌ Typing herf instead of href (yes, I did that 😅)
• ❌ Nesting links inside each other (you can't do that!)

💡 Pro Tip: You Can Link Anything!

You’re not limited to linking just text. You can wrap an image, button, or even an entire div in a link!

<a href="project.html">
  <img src="project-thumbnail.png" alt="Project Preview">
</a>
                        

Clicking the image will now take you to project.html.

🎯 What I Learned

The <a> tag made me realize how connected the web really is. One small tag can take you anywhere — from your local file to a global website. It's what truly makes the web feel like a “web.” 🕸️

Now my pages don't just sit there — they actually go somewhere!

👉 What's Next?

In my next post, I'll talk about Adding Images with <img> - Making Web Pages Visual. We'll learn how to display images, use the src and alt attributes, and make your pages come alive with visuals.

Thanks for reading, See you in the next post!

— Evans 🔗💻