How to Add Links in HTML — HTML Tutorial #4 for Beginners

Hey friend! 👋

Welcome back to the HTML Basics for Beginners series!

In Tutorial #3, you learned all about HTML attributes — what they are, how to write them, and why they matter.

Now it’s time to put one of the most important attributes to work.

Today we’re talking about links. 🔗

Think about it — what makes the internet the internet? It’s not just pages. It’s the ability to jump from one page to another in one click. From one website to another. From a heading to a section. From a button to your inbox.

That’s all links. Links are also known as Hyperlinks. And without them, the web would just be a collection of lonely, disconnected pages. 😢

Today you’re going to learn how to connect things together — like a pro. 🚀

What You’ll Learn Today about HTML Links

By the end of this tutorial, you’ll be able to:

✅ Create clickable links with the <a> tag
✅ Understand the difference between absolute and relative URLs
✅ Open links in a new tab
✅ Link to email addresses and phone numbers
✅ Turn an image into a clickable link
✅ Create jump links to sections on the same page
✅ Write accessible, SEO-friendly link text
✅ Build a mini project: My Favourite Websites 🌐

Let’s go! 🔥

Before You Start

Prerequisites:
✅ Completed Tutorial #3 — How to Use HTML Attributes
✅ A text editor (VS Code, Notepad, etc.)
✅ A web browser (Chrome, Firefox, etc.)

Ready? Let’s dive in!

Step 1: Your Very First HTML Link

To create a link in HTML, we use the <a> tag.

The <a> stands for anchor — think of it as dropping an anchor that connects two places together. ⚓

But here’s the thing — the <a> tag on its own won’t do anything. It needs its best friend: the href attribute. href tells the browser exactly where to go when someone clicks the link.

Here’s the basic recipe:

<a href="https://www.codeboid.com">Take me to Codeboid!</a>

Let’s break it down:

<a> → opens the anchor tag
href="https://www.codeboid.com" → the destination URL
Take me to Codeboid! → the clickable text the user sees
</a> → closes the anchor tag

When someone hovers over it in the browser, the cursor magically turns into a little hand 👆 — that’s how they know it’s clickable!

💡 Think of <a href> as:
A signpost. The text is what’s written on the sign. The href is the road it’s pointing to.

Practice Challenge 🎯

Create a new file called links.html and try this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My First Link</title>
  </head>
  <body>
    <h1>My First Link</h1>
    <a href="https://codeboid.com">Visit Codeboid</a>
    <a href="https://wikipedia.org">Visit Wikipedia</a>
  </body>
</html>

Open it in your browser and hover over the links — see the cursor turn into a hand? Click them and see where they go! 👆

Step 2: Absolute vs. Relative URLs

Now that you know how to write a link, let’s talk about the type of URL you put inside href.

There are two types — and knowing which one to use is really important. 👇

Absolute URLs — The Full Address

An absolute URL is the complete, full web address — starting with https://.

Use it when you’re linking to a different website:

<a href="https://www.google.com">Google</a>
<a href="https://codeboid.com">Codeboid</a>
<a href="https://wikipedia.org">Wikipedia</a>

Think of it like a full home address — street name, city, country, everything. Someone could find it from anywhere in the world.

Relative URLs — The Short Path

A relative URL is a short path that points to a page on your own website.

You don’t need https:// — just the file name or folder path.

💻 Try this on your computer! Just create the files below on your computer and open index.html in your browser.

To understand this properly, let’s create a small project with three files:

my-website/
├── index.html
├── about.html
└── pages/
    └── contact.html

Here’s what each file looks like:

📄 index.html — your home page

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Home</title>
  </head>
  <body>
    <h1>Home Page</h1>

    <!-- Same folder → just use the file name -->
    <a href="about.html">Go to About Page</a>

    <!-- Inside a folder → use the folder name + file name -->
    <a href="pages/contact.html">Go to Contact Page</a>
  </body>
</html>

📄 about.html — in the same folder as index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>About</title>
  </head>
  <body>
    <h1>About Page</h1>

    <!-- Go back up to index.html in the parent folder -->
    <a href="index.html">Back to Home</a>
  </body>
</html>

📄 pages/contact.html — inside the pages folder

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Contact</title>
  </head>
  <body>
    <h1>Contact Page</h1>

    <!-- ../ means go one level up, then find index.html -->
    <a href="../index.html">Back to Home</a>
  </body>
</html>

💡 How to read ../:
Think of ../ as saying “go back one folder.”
contact.html lives inside pages/ — so ../ takes you back up to my-website/, where index.html lives.

Think of it like giving directions from where you already are. Instead of “350 5th Avenue, New York” you just say “third door on the left.” 😄

Quick Comparison

Type	When to Use	Example
Absolute	Linking to another website	`href="https://google.com"`
Relative	Linking to your own pages	`href="about.html"`

💡 Simple rule:
Linking somewhere else on the internet? → Absolute
Linking to your own page? → Relative

Practice Challenge 🎯

Try this on your computer:

Create a folder on your desktop called my-website
Inside it, create index.html and about.html
Inside my-website, create a folder called pages and add contact.html inside it
Copy the three files above, open index.html in your browser and click between all the pages

All links should work perfectly! ✅

Step 3: Opening Links in a New Tab

Have you ever clicked a link and lost the page you were reading?

Super annoying, right? 😤

You can fix this for your visitors using the target attribute.

When you add target="_blank" to your link, the browser opens it in a brand new tab — so the original page stays open.

<a href="https://www.codeboid.com" target="_blank">Visit Codeboid</a>

Try it — click the link and watch a new tab pop open! 🎉

👉 Try it on CodePen

See the Pen Codeboid – HTML Tutorial #4 — Hyperlink in a New Tab by Codeboid (@Codeboid) on CodePen.

⚠️ Security Tip

When using target="_blank", always add rel="noopener noreferrer" too:

<a href="https://www.codeboid.com" target="_blank" rel="noopener noreferrer">
  Visit Codeboid
</a>

Why? Without it, the new tab can technically access your page in the background. Adding rel="noopener noreferrer" closes that security gap. It’s a small habit that makes a big difference. 🔒

All `target` Values

While _blank is the one you’ll use most, here’s the full picture:

Value	What It Does
`_blank`	Opens in a new tab or window
`_self`	Opens in the same tab (this is the default)
`_parent`	Opens in the parent frame (used with iframes)
`_top`	Opens in the full browser window

💡 In everyday web development, you’ll use _blank and _self 99% of the time.

Practice Challenge 🎯

Create a new file called links-new-tab.html and try this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Open Links in New Tab</title>
  </head>
  <body>
    <h1>My Favourite Websites</h1>
    <p><a href="https://youtube.com" target="_blank" rel="noopener noreferrer">YouTube</a></p>
    <p><a href="https://wikipedia.org" target="_blank" rel="noopener noreferrer">Wikipedia</a></p>
    <p><a href="https://codeboid.com" target="_blank" rel="noopener noreferrer">Codeboid</a></p>
  </body>
</html>

Click each link — they should all open in a new tab while this page stays open! 🎉

Step 4: Linking to Emails and Phone Numbers

Here’s a fun one — links don’t only point to web pages! 🤯

You can create links that open someone’s email app or dial a phone number directly.

Email Links → `mailto:`

Use mailto: inside the href to create a link that opens the user’s default email app with your address already filled in:

<a href="mailto:hello@codeboid.com">Send Us an Email</a>

Click it and your email app pops open — ready to go! 📧

You can even pre-fill the subject line:

<a href="mailto:hello@codeboid.com?subject=Hello from your website">
  Send Us a Message
</a>

Phone Links → `tel:`

Use tel: to create a link that dials a number. On a mobile phone, tapping it opens the dialler automatically:

<a href="tel:+12125550199">Call Us: +1 (212) 555-0199</a>

📱 This is really useful for business websites — one tap and the customer is calling you!

Putting It Together

<h2>Contact Us</h2>
<p>📧 <a href="mailto:hello@codeboid.com">hello@codeboid.com</a></p>
<p>📞 <a href="tel:+12125550199">+1 (212) 555-0199</a></p>

Practice Challenge 🎯

Create a new file called contact.html and try this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Contact Me</title>
  </head>
  <body>
    <h1>Get in Touch</h1>
    <p>📧 <a href="mailto:you@example.com">Email Me</a></p>
    <p>📞 <a href="tel:+1234567890">Call Me</a></p>
  </body>
</html>

Click the email link — does your email app open? Tap the phone link on your mobile — does the dialler pop up? 📱

Step 5: Using an Image as a Link

Who says links have to be boring text? 😄

You can turn any image into a clickable link — just wrap the <img> tag inside the <a> tag!

📌 Note: We’re using <img> here just to show how image links work. We’ll cover everything about images — src, alt, width, height, image formats, and more — in full detail in Tutorial #5: How to Add Images in HTML. For now, just focus on how the link wrapping works!

<a href="https://codeboid.com" target="_blank" rel="noopener noreferrer">
  <img src="https://codeboid.com/wp-content/uploads/2025/08/Codeboid-Logo-Black-Aug-8-2025.png" alt="Visit Codeboid - Learn Coding" width="50" height="50">
</a>

👉 Try it on CodePen

See the Pen Codeboid – HTML Tutorial #4 — Image as Link by Codeboid (@Codeboid) on CodePen.

Now clicking the image takes you to Codeboid. This is exactly how logo links work on real websites! 🎯

💡 The rule: Whatever is between the <a>...</a> tags becomes clickable — text, images, or both.

⚠️ Important: Alt Text for Linked Images

When an image is used as a link, the alt text rules change slightly.

For a normal image, alt describes what the image looks like.
For a linked image, alt should describe where the link goes.

<!-- ❌ Bad — describes looks, not destination -->
<a href="https://codeboid.com">
  <img src="logo.png" alt="Blue logo with text">
</a>

<!-- ✅ Good — describes the destination -->
<a href="https://codeboid.com">
  <img src="logo.png" alt="Visit Codeboid - Learn Coding for Beginners">
</a>

Why? Screen reader users navigate links by their label. If the label is just “blue logo with text,” they have no idea where it goes. Be helpful! 🦾

Practice Challenge 🎯

Create a new file called image-link.html and try this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Image as a Link</title>
  </head>
  <body>
    <h1>Click the Image!</h1>
    <a href="https://wikipedia.org" target="_blank" rel="noopener noreferrer">
      <img src="https://via.placeholder.com/150" alt="Visit Wikipedia - The Free Encyclopedia" width="150" height="150">
    </a>
  </body>
</html>

Step 6: Jump Links — Jumping Around a Page

Here’s a super useful trick for long pages.

You can create links that jump to a specific section on the same page when clicked — like a table of contents!

This is done in two steps:

Step A: Give the Section an `id`

First, add an id attribute to the element you want to jump to:

<h2 id="chapter-one">Chapter One</h2>

💡 Remember id from Tutorial #3: How to Use HTML Attributes? This is one of its most practical uses — giving a section a unique name so you can link directly to it!

Step B: Link to That `id` Using `#`

Then create a link using # followed by the id name:

<a href="#chapter-one">Jump to Chapter One</a>

When someone clicks it, the page instantly scrolls to that heading! ✨

Full Example

<!-- Navigation at the top -->
<a href="#intro">Introduction</a>
<a href="#tips">My Tips</a>
<a href="#summary">Summary</a>

<!-- Sections further down the page -->
<h2 id="intro">Introduction</h2>
<p>Welcome to my page!</p>

<h2 id="tips">My Tips</h2>
<p>Here are my top tips...</p>

<h2 id="summary">Summary</h2>
<p>That's a wrap!</p>

👉 Try it on CodePen

See the Pen Codeboid – HTML Tutorial #4 — Jump Links by Codeboid (@Codeboid) on CodePen.

Back to Top Button

You can also add a “Back to Top” link using #top:

<a href="#top">⬆ Back to Top</a>

This is really common on long blog posts and documentation pages. You’ll find them everywhere once you start looking! 😄

Practice Challenge 🎯

Create a new file called jump-links.html and try this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Jump Links</title>
  </head>
  <body>

    <h1 id="top">My Long Page</h1>

    <!-- Navigation menu -->
    <p>
      <a href="#section1">Section 1</a> |
      <a href="#section2">Section 2</a> |
      <a href="#section3">Section 3</a>
    </p>

    <h2 id="section1">Section 1</h2>
    <p>Content for section 1.</p>
    <br><br><br><br><br><br><br><br><br><br>

    <h2 id="section2">Section 2</h2>
    <p>Content for section 2.</p>
    <br><br><br><br><br><br><br><br><br><br>

    <h2 id="section3">Section 3</h2>
    <p>Content for section 3.</p>
    <br><br><br><br><br><br><br><br><br><br>

    <a href="#top">⬆ Back to Top</a>

  </body>
</html>

Click each navigation link — the page should jump to that section instantly. Click “Back to Top” and you’re back at the start! ✨

💡 The <br> tags just add spacing so the page is long enough to actually see the jumping effect!

Step 7: Write Accessible Link Text

Before you go build your amazing website, there’s one golden rule you need to know. 🏆

Never use “click here” as your link text.

It’s one of the most common mistakes beginners make — and it’s easy to fix!

<!-- ❌ Bad — tells the user nothing -->
<p>To learn HTML, <a href="tutorial.html">click here</a>.</p>
<p>For cat pictures, <a href="cats.html">click here</a>.</p>
<p>Download the file <a href="file.pdf">here</a>.</p>

Instead, use descriptive link text that clearly tells the user where they’re going — even when read out of context:

<!-- ✅ Good — clear and descriptive -->
<p><a href="tutorial.html">Start the HTML tutorial</a>.</p>
<p>Check out <a href="cats.html">my cat pictures</a>.</p>
<p><a href="file.pdf">Download the HTML cheat sheet (PDF)</a>.</p>

Why does this matter?

Two big reasons:

Accessibility — People who use screen readers often jump from link to link. If every link says “click here,” they have absolutely no idea where anything goes. Descriptive text helps everyone.
SEO — Search engines use link text to understand what the destination page is about. “Learn HTML for beginners” is far more useful to Google than “click here.”

💡 Quick test: Read your link text completely out of context. Does it still make sense? If yes — great! If no — rewrite it. ✅

Mini Project: My Favourite Websites 🌐

Let’s put everything together!

You’ll build a “My Favourite Websites” page with links, email, phone, image links, and a jump menu all in one.

Create a new file called favourite-websites.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Favourite Websites</title>
</head>

<body>

    <h1 id="top">My Favourite Websites</h1>

    <!-- Jump navigation -->
    <p>
        <a href="#learning">Learning</a> |
        <a href="#entertainment">Entertainment</a> |
        <a href="#contact">Contact</a>
    </p>

    <hr>

    <!-- Section 1 -->
    <h2 id="learning">📚 Learning</h2>

    <h3>1. Codeboid</h3>
    <a href="https://codeboid.com" target="_blank" rel="noopener noreferrer">
        <img src="https://res.cloudinary.com/du6k9jj1m/image/upload/v1757710191/Codeboid_Logo_with_bg_ntshnf.png"
            alt="Visit Codeboid - Learn Coding for Beginners" width="50" height="50">
    </a>
    <p><a href="https://codeboid.com" target="_blank" rel="noopener noreferrer">Visit Codeboid</a> — Learn coding from
        scratch!</p>

    <h3>2. Wikipedia</h3>
    <a href="https://wikipedia.org" target="_blank" rel="noopener noreferrer">
        <img src="https://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png"
            alt="Visit Wikipedia - The Free Encyclopedia" width="80" height="80">
    </a>
    <p><a href="https://wikipedia.org" target="_blank" rel="noopener noreferrer">Visit Wikipedia</a> — The free
        encyclopedia.</p>

    <hr>

    <!-- Section 2 -->
    <h2 id="entertainment">🎬 Entertainment</h2>

    <h3>3. YouTube</h3>
    <a href="https://youtube.com" target="_blank" rel="noopener noreferrer">
        <img src="https://upload.wikimedia.org/wikipedia/commons/b/b8/YouTube_Logo_2017.svg"
            alt="Visit YouTube - Watch Videos Online" width="150" height="34">
    </a>
    <p><a href="https://youtube.com" target="_blank" rel="noopener noreferrer">Visit YouTube</a> — Watch videos on any
        topic!</p>

    <hr>

    <!-- Section 3 -->
    <h2 id="contact">📬 Contact Me</h2>
    <p>📧 <a href="mailto:hello@example.com">hello@example.com</a></p>
    <p>📞 <a href="tel:+12125550199">+1 (212) 555-0199</a></p>

    <hr>

    <!-- Back to top -->
    <p><a href="#top">⬆ Back to Top</a></p>

    <p><small>Copyright &copy; 2026 My Favourite Websites</small></p>

</body>

</html>

What’s Happening in This Code?

✅ id="top" on <h1> → lets the “Back to Top” link work
✅ Jump navigation at the top → links to three sections using #id
✅ target="_blank" rel="noopener noreferrer" → opens external links safely in a new tab
✅ Images wrapped in <a> → clickable logos
✅ Descriptive alt text on linked images → describes the destination
✅ mailto: → email link
✅ tel: → phone link
✅ <a href="#top"> → back to top button
✅ © → copyright symbol in the footer

Your Turn! 🎯

Customise this page:

Add 2 more websites of your choice with their logos
Replace the email and phone number with your own (or a made-up one)
Add a fourth section — maybe “News” or “Tools”
Change the jump navigation to match your new sections

Cheat Sheet (Save This!)

── BASIC LINK ─────────────────────────────────────────────────────

<a href="URL">Link text</a>

── URL TYPES ──────────────────────────────────────────────────────

Absolute (external site)
<a href="https://google.com">Google</a>

Relative (your own site)
<a href="about.html">About Me</a>

── OPEN IN NEW TAB ────────────────────────────────────────────────

<a href="URL" target="_blank" rel="noopener noreferrer">Link</a>

── ALL TARGET VALUES ──────────────────────────────────────────────

target="_blank"    → New tab or window
target="_self"     → Same tab (default)
target="_parent"   → Parent frame
target="_top"      → Full browser window

── EMAIL & PHONE ──────────────────────────────────────────────────

<a href="mailto:you@example.com">Email Me</a>
<a href="mailto:you@example.com?subject=Hello">Email with subject</a>
<a href="tel:+1234567890">Call Me</a>

── IMAGE AS LINK ──────────────────────────────────────────────────

<a href="URL">
  <img src="image.jpg" alt="Describe the destination">
</a>

── JUMP LINKS ─────────────────────────────────────────────────────

Give a section an id:
<h2 id="about">About Me</h2>

Link to it using #:
<a href="#about">Go to About</a>

Back to top:
<a href="#top">Back to Top</a>

── ACCESSIBILITY RULE ─────────────────────────────────────────────

❌ <a href="page.html">click here</a>
✅ <a href="page.html">Read the HTML beginner tutorial</a>

Quick Recap

Today you learned:

✅ How to create links with <a> and href
✅ The difference between absolute and relative URLs
✅ How to open links in a new tab with target="_blank"
✅ How to add rel="noopener noreferrer" for security
✅ How to create email links with mailto:
✅ How to create phone links with tel:
✅ How to turn images into clickable links
✅ How to write the correct alt text for linked images
✅ How to create jump links using id and #
✅ How to write accessible, descriptive link text
✅ Built a complete My Favourite Websites page

Common Mistakes to Avoid

❌ Forgetting href — without it, the link goes nowhere
❌ Using “click here” as link text — always be descriptive
❌ Forgetting https:// in absolute URLs — google.com alone won’t work
❌ Using target="_blank" without rel="noopener noreferrer" — security risk
❌ Forgetting to close </a> — everything after it becomes a link!
❌ Using the same id twice — id must be unique on the page
❌ Wrong alt text on linked images — describe the destination, not the looks

Get the Source Code

You can find all the code from this tutorial on GitHub:

👉 Codeboid/html-series

Final Thoughts

Links are the heartbeat of the internet. 💓

Every website you’ve ever visited, every article you’ve ever read, every video you’ve ever clicked — they all got there because of links.

And now you know exactly how to build them yourself.

You know how to connect pages, open new tabs, send emails, dial phones, jump around a page, and make images clickable.

That’s not beginner stuff anymore — that’s real web development. 🚀

Keep practising. Keep building. Keep going. 🌱

What’s Next?

Coming Up in Tutorial #5: How to Add Images in HTML

You’ll learn:

How to add images with <img> and src
How to write great alt text
How to control image size with width and height
How to choose the right image format (JPEG, PNG, SVG, GIF)
Mini project: My Photo Gallery 🖼️

👉 Continue to Tutorial #5: How to Add Images in HTML →

How to Add Links in HTML — HTML Tutorial #4 for Beginners

What You’ll Learn Today about HTML Links

Before You Start

Step 1: Your Very First HTML Link

Practice Challenge 🎯

Step 2: Absolute vs. Relative URLs

Absolute URLs — The Full Address

Relative URLs — The Short Path

Quick Comparison

Practice Challenge 🎯

Step 3: Opening Links in a New Tab

⚠️ Security Tip

All target Values

Practice Challenge 🎯

Step 4: Linking to Emails and Phone Numbers

Email Links → mailto:

Phone Links → tel:

Putting It Together

Practice Challenge 🎯

Step 5: Using an Image as a Link

⚠️ Important: Alt Text for Linked Images

Practice Challenge 🎯

Step 6: Jump Links — Jumping Around a Page

Step A: Give the Section an id

Step B: Link to That id Using #

Full Example

Back to Top Button

Practice Challenge 🎯

Step 7: Write Accessible Link Text

Why does this matter?

Mini Project: My Favourite Websites 🌐

What’s Happening in This Code?

Your Turn! 🎯

Cheat Sheet (Save This!)

Quick Recap

Common Mistakes to Avoid

Get the Source Code

Final Thoughts

What’s Next?

All `target` Values

Email Links → `mailto:`

Phone Links → `tel:`

Step A: Give the Section an `id`

Step B: Link to That `id` Using `#`