How to Create a Link in HTML

What you’ll build or solve

You’ll create clickable links that open pages, jump to sections, send emails, start phone calls, or point to files.

When this approach works best

Creating a link works best when you:

• Connect pages inside your site.
• Send users to an external website.
• Let users email or call directly from your page.
• Jump to a specific section without reloading the page.

This approach is a bad idea if you use buttons without proper navigation logic or depend on JavaScript for simple page links.

Prerequisites

• A code editor
• A browser
• Basic understanding of HTML tags

No additional setup is required.

Step-by-step instructions

Step 1: Create links with <a> and href

All HTML links use the anchor tag <a> with the href attribute.

Basic structure:

<ahref="destination">Link Text</a>

• <a> defines the link.
• href defines where it goes.
• The text between the tags is clickable.

Link to an external website

<ahref="https://example.com">Visit Example</a>

Link to another page in your project

<ahref="about.html">About Us</a>

Use relative paths when linking inside your project.

Create an email link

<ahref="mailto:hello@example.com">Send Email</a>

This opens the user’s default email app.

Create a phone link

<ahref="tel:+1234567890">Call Now</a>

This works especially well on mobile devices.

Link to a section on the same page

Add an id to the target element:

<h2id="contact">Contact</h2>

Then link to it:

<ahref="#contact">Jump to Contact</a>

The #contact must match the id exactly.

Link to a file

<ahref="resume.pdf">Download Resume</a>

If the file is in the same folder, this works directly. Otherwise, adjust the path.

Useful link attributes

Open an external site in a new tab:

<ahref="https://example.com"target="_blank"rel="noopener noreferrer">
  Open in new tab
</a>

Suggest downloading a file instead of opening it:

<ahref="resume.pdf"download>Download Resume</a>

What to look for:

• Use correct relative paths like about.html or ../about.html.
• Make sure href is not empty.
• Use rel="noopener noreferrer" when using target="_blank" for security.

Step 2: Style links with classes

Links work without styling, but you can change their appearance.

Inline example (quick test)

<ahref="signup.html"style="color:red;">Sign Up</a>

Reusable class example

<ahref="signup.html"class="btn">Sign Up</a>

<style>
  .btn {
    display:inline-block;
    padding:10px20px;
    background-color: #2563eb;
    color:white;
    text-decoration:none;
    border-radius:4px;
  }
</style>

Use classes for repeated styles.

Examples you can copy

Example 1: Simple navigation menu

<nav>
<ahref="index.html">Home</a>
<ahref="services.html">Services</a>
<ahref="contact.html">Contact</a>
</nav>

Example 2: Email and phone contact block

<divclass="contact">
<p>Email:<ahref="mailto:support@example.com">support@example.com</a></p>
<p>Phone:<ahref="tel:+1234567890">+1 234 567 890</a></p>
</div>

Example 3: External resource with new tab

<p>
  Read more on
<ahref="https://developer.mozilla.org"
target="_blank"
rel="noopener noreferrer">
    MDN Web Docs
</a>.
</p>

Common mistakes and how to fix them

Mistake 1: Forgetting the href attribute

What you might do

<a>Click here</a>

Why it breaks

Without href, the anchor is not a clickable link.

Fix

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

Mistake 2: Using the wrong file path

What you might do

<ahref="/about.html">About</a>

Why it breaks

A leading slash points to the root directory. If the file is not there, the link fails.

Fix

Use the correct relative path:

<ahref="about.html">About</a>

Mistake 3: Leaving links unstyled in custom UI

What you might do

a {
  color:red;
}

Why it looks inconsistent

Browsers underline links by default.

Fix

a {
  color:red;
  text-decoration:none;
}

a:hover {
  text-decoration:underline;
}

Troubleshooting

• If a link does nothing, confirm the href value is present.
• If a page does not load, check the file path and folder structure.
• If an email link fails, confirm the format mailto:name@example.com.
• If jumping to a section does not work, verify the id matches the anchor.
• If a file does not download, confirm it exists at the specified location.

Quick recap

• Use <a> with href to create links.
• Change behavior using different href values like https:, mailto:, tel:, or #id.
• Use target="_blank" for external links when needed.
• Use download to suggest file downloads.
• Always verify file paths and href values.