• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

HTML Links

← Previous Next →

Links are one of the most important parts of any webpage. They allow users to move from one page to another, download files, jump to sections within a page, open email clients, and even trigger phone calls. In HTML, links are created using the <a> tag, and understanding how it works is essential for building real, usable websites.

In this chapter, you'll learn how to create basic links, open links in new tabs, link to email and phone numbers, use internal page anchors, and work with absolute and relative URLs.

What Is an HTML Link?

An HTML link is created using the anchor tag <a>. It connects the current page to another resource. This resource can be anything:

  • A webpage

  • A section in the same page

  • A file

  • An email address

  • A phone number

  • A downloadable document

The simplest link looks like this:

<a href="https://example.com">Visit Website</a>

Here, href contains the destination, and the text between the tags is the clickable link.

The href Attribute

The href attribute tells the browser where the link should go. Without href, the anchor tag is not a link.

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

If you remove the href, the text still looks clickable in some browsers, but it has no destination.

<a>About Us</a>   <!-- Not a link -->

Always include the href unless you are intentionally styling something.

Types of Links in HTML

HTML supports different kinds of links. Each one is used for a specific purpose.

1. Linking to Another Website (Absolute URL)

Absolute URLs include the full path, including the protocol (https).

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

Use this when linking to external sites.

2. Linking to Pages Within Your Website (Relative URL)

Relative URLs refer to files in your project.

<a href="contact.html">Contact</a>

If your file is inside a folder:

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

To go back one folder:

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

Relative URLs keep your project portable. If you move your entire website to another server, the links still work.

3. Linking to a Section Inside the Same Page (Anchor Links)

Anchor links help users jump to a specific part of the page. You first mark the destination using id.

<h2 id="courses">Courses</h2>

Then create a link to it:

<a href="#courses">Go to Courses Section</a>

This is useful for long pages like FAQs or documentation.

4. Linking to an Email Address

HTML allows email links using the mailto: prefix.

<a href="mailto:info@example.com">Send Email</a>

You can even pre-fill the subject:

<a href="mailto:info@example.com?subject=Inquiry">Email Us</a>

5. Linking to a Phone Number

Phone links are common on mobile websites.

<a href="tel:+919876543210">Call Now</a>

When clicked on a mobile device, the phone dialer opens automatically.

6. Downloading Files

To force downloads, point the link to a file and add the download attribute.

<a href="files/report.pdf" download>Download Report</a>

Browsers will download the file instead of opening it.

Opening a Link in a New Tab

To open a link in a new browser tab, use:

<a href="https://example.com" target="_blank">Open in New Tab</a>

For security reasons, add:

rel="noopener noreferrer"

Full example:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
    Visit Example
</a>

This prevents the new tab from accessing the parent page.

Styling Links

Browsers apply default styling to links:

  • Blue color for normal links

  • Purple for visited links

  • Underline for clickable links

You can change these styles with CSS.

Removing underline:

a {
    text-decoration: none;
}

Changing color:

a {
    color: green;
}

Adding hover effects:

a:hover {
    color: red;
}

Styling links helps them fit your website’s design.

Using Images as Links

You can turn any image into a clickable link.

<a href="home.html">
    <img src="logo.png" alt="Website Logo">
</a>

This is commonly used for clicking company logos to return to the homepage.

Buttons as Links

Sometimes you want a button that behaves like a link. You can style the <a> tag like a button.

<a href="register.html" class="btn">Register Now</a>

With CSS:

.btn {
    padding: 10px 20px;
    background: blue;
    color: white;
    border-radius: 5px;
}

This creates a clickable button that leads to another page.

Link Titles (Optional Tooltip)

The title attribute shows a small tooltip when the user hovers over the link.

<a href="services.html" title="See our services">Services</a>

This is optional but helpful for clarity.

Disabled Links

HTML does not have a native “disabled link” attribute, but developers commonly do this:

<a href="#" class="disabled">Coming Soon</a>

Then disable clicking with CSS:

.disabled {
    pointer-events: none;
    color: gray;
}

This makes the link visible but not clickable.

Best Practices for Writing Links

Here are some guidelines you should follow:

  • Make link text meaningful

  • Avoid writing “click here”

  • Keep URLs short

  • Use relative URLs for internal pages

  • Open external sites in a new tab

  • Add titles when useful

  • Make sure your links are accessible

Better:

<a href="courses.html">View Course List</a>

Poor:

<a href="courses.html">Click here</a>

Meaningful text helps users and search engines.

Complete Example Showing Different Link Types

<!DOCTYPE html>
<html>
<head>
    <title>HTML Links</title>
</head>
<body>

<h1>HTML Links Example</h1>

<p><a href="about.html">Go to About Page</a></p>

<p><a href="https://google.com" target="_blank">Search on Google</a></p>

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

<p><a href="mailto:info@example.com">Email Us</a></p>

<p><a href="tel:+919876543210">Call Support</a></p>

<p><a href="files/brochure.pdf" download>Download Brochure</a></p>

<h2 id="contact">Contact Section</h2>
<p>This is the end of the page.</p>

</body>
</html>

Summary of HTML Links

HTML links connect your webpage to other pages, files, sections, and external websites. You create them using the <a> tag and the href attribute. Links can open in new tabs, send emails, trigger phone calls, download files, and help users navigate long pages. Good link structure improves usability, accessibility, and search engine understanding. Always write clear, meaningful link text and use relative URLs for internal navigation.

Practice Questions

Q1. Create a link to https://www.google.com.

Q2. Add a link that opens in a new tab.

Q3. Make an internal link to a file named contact.html.

Q4. Add a mailto: link to send an email.

Q5. Create a link that opens the dialer with a phone number.

Q6. Use #footer to link to a section at the bottom of the same page.

Q7. Add a title to a link that says “Go to Home Page”.

Q8. Create an image link using your logo.

Q9. Change link color to green and remove underline using CSS.

Q10. Create a navigation menu using multiple <a> tags.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top