HTML Links

HTML links are used to connect one web page to another page, website, file, section, or online resource. Links are one of the most important parts of the web because they allow users to navigate between different pages and resources.

In HTML, links are created using the <a> element, also known as the anchor element.

In this tutorial, you will learn how to create HTML links, use the href attribute, open links in new tabs, create internal and external links, link to email addresses and phone numbers, create bookmarks, and understand important link attributes.

What Are HTML Links?

An HTML link allows users to navigate from one location to another when they click it.

A basic HTML link looks like this:

Here:

• <a> is the anchor element.
• href specifies the destination.
• Visit Example is the clickable text.
• </a> closes the anchor element.

The text between <a> and </a> becomes clickable.

HTML Link Syntax

The basic syntax of an HTML link is:

<a href=”URL”>Link Text</a>

For example:

<a href=”https://web4learners.com”>Visit Web4Learners</a>

When a user clicks the link, the browser navigates to the URL specified in the href attribute.

The HTML href Attribute

The href attribute specifies where the link should go.

For example:

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

Without the href attribute, the anchor element does not provide a normal navigation destination.

The href value can point to:

• Another website
• Another page on the same website
• A specific section of a page
• An email address
• A phone number
• A downloadable file

External HTML Links

An external link points to a different website or domain.

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

Another example:

<a href=”https://www.w3.org/”>Visit W3C</a>

External links are commonly used when referencing information or resources from other websites.

Internal HTML Links

An internal link points to another page on the same website.

For example:

<a href=”/html/html-elements/”>HTML Elements</a>

Another example:

<a href=”/html/html-attributes/”>HTML Attributes</a>

Internal links are useful for website navigation and help users discover related content.

Opening a Link in a New Tab

You can use the target attribute to control where a link opens.

• To open a link in a new browsing context, commonly a new tab:
• <a href=”https://www.google.com” target=”_blank”>Open Google</a>
• When using target="_blank" for an external link, it is good practice to use an appropriate rel value as well.
• <a href=”https://www.example.com” target=”_blank” rel=”noopener”>Visit Example</a>

HTML Link target Values

The target attribute can have different values.

Value	Purpose
_self	Opens in the current browsing context
_blank	Opens in a new browsing context
_parent	Opens in the parent browsing context
_top	Opens in the top-level browsing context

The default behavior is generally _self.

HTML Link Titles

You can use the title attribute to provide additional information about a link.

<a href="/html/html-images/" title="Learn about HTML images">
    HTML Images
</a>

However, the visible link text should already make the destination clear. Do not rely on the title attribute as the only way to explain a link.

Linking to an Email Address

You can create an email link using the mailto: scheme.

<a href=”mailto:example@example.com”>Send an Email</a>

When the user clicks the link, the browser can open the default email application.

You can also specify a subject:

<a href=”mailto:example@example.com?subject=HTML%20Question”>
Contact Us
</a>

Linking to a Phone Number

The tel: scheme can be used to create a phone link.

<a href=”tel:+919876543210″>Call Us</a>

This is particularly useful on mobile devices.

HTML Links to Files

An anchor can also point to a file.

• <a href=”/files/html-notes.pdf”>Download HTML Notes</a>
• You can use the download attribute when you want to suggest that the browser download the linked resource.
• <a href=”/files/html-notes.pdf” download>Download HTML Notes</a>

Whether a file is actually downloaded can also depend on browser behavior and server configuration.

HTML Bookmark Links

You can create a link that jumps to a specific section of the same page.

• First, give the target element an id:
• <h2 id=”html-links”>HTML Links</h2>
• Then create a link to it:
• <a href=”#html-links”>Go to HTML Links</a>

When the user clicks the link, the browser navigates to the element with that ID.

Linking to a Section on Another Page

You can also link directly to an element on another page.

For example:

<a href=”/html/html-links/#html-links”>Learn About HTML Links</a>

The browser first opens the page and then navigates to the element with the matching ID.

HTML Link Images

An image can also be placed inside an anchor element to make the image clickable.

<a href="/html/html-images/">
    <img src="html-image.jpg" alt="Learn HTML Images">
</a>

When the user clicks the image, the browser navigates to the specified page.

HTML Link Attributes

Several attributes can be used with the <a> element.

Attribute	Purpose
href	Specifies the destination
target	Specifies where the link opens
rel	Defines the relationship between the current page and linked resource
download	Suggests downloading the resource
hreflang	Indicates the language of the linked resource
type	Provides a hint about the linked resource type
title	Provides additional advisory information

The most commonly used attributes are href, target, rel, and download.

HTML Link rel Attribute

The rel attribute describes the relationship between the current document and the linked resource.

For example:

<a href=”https://example.com” rel=”nofollow”>Visit Example</a>

For links opened with _blank, noopener is commonly used:

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

The appropriate rel value depends on the purpose of the link.

HTML Links and SEO

Links play an important role in website structure and navigation.

Internal links can help users discover related content and help search engines understand relationships between pages.

For example:

<a href=”/html/html-elements/”>Learn HTML Elements</a>

Use descriptive anchor text rather than vague text such as:

<a href=”/html/html-elements/”>Click Here</a>

A more descriptive link is:

<a href=”/html/html-elements/”>Learn HTML Elements</a>

Good anchor text tells users what they can expect after clicking the link.

HTML Links and Accessibility

Links should have clear and meaningful text.

Good example:

<a href=”/html/html-images/”>Learn HTML Images</a>

Less descriptive:

<a href=”/html/html-images/”>Click Here</a>

Clear link text helps users understand the destination, including people navigating a page using assistive technologies.

Common Mistakes with HTML Links

Forgetting the href Attribute

Incorrect:

<a>Visit Web4Learners</a>

Correct:

<a href=”https://web4learners.com”>Visit Web4Learners</a>

Using an Incorrect URL

Make sure the destination is correct:

<a href=”/html/html-elements/”>HTML Elements</a>

Using Unclear Link Text

Avoid using generic text when a descriptive label is possible.

Instead of:

<a href=”/html/html-images/”>Click Here</a>

Use:

<a href=”/html/html-images/”>Learn HTML Images</a>

HTML Links Best Practices

Follow these practices when creating HTML links:

• Use descriptive anchor text.
• Use href to specify the destination.
• Use internal links to connect related pages.
• Use absolute URLs for external destinations when appropriate.
• Use relative URLs for suitable internal links.
• Use target="_blank" only when opening a new browsing context is useful.
• Use an appropriate rel value with new-tab external links.
• Make links easy to identify and use.
• Check links regularly to avoid broken destinations.

Complete HTML Links Example

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

    <h1>HTML Links</h1>

    <p>
        <a href="https://web4learners.com">
            Visit Web4Learners
        </a>
    </p>

    <p>
        <a href="/html/html-elements/">
            Learn HTML Elements
        </a>
    </p>

    <p>
        <a href="https://www.example.com" target="_blank" rel="noopener">
            Open Example
        </a>
    </p>

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

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

</body>
</html>

HTML Links Cheat Sheet

Code	Purpose
<a href="URL">Text</a>	Creates a link
target="_blank"	Opens the link in a new browsing context
rel="noopener"	Provides a relationship hint for a new-tab link
mailto:	Creates an email link
tel:	Creates a phone link
#id	Links to an element on the same page
download	Suggests downloading a resource