HTML links, also called hyperlinks, allow users to navigate from one webpage to another webpage, website, file, section, or online resource. Links are one of the most important parts of the web because they connect different pages and help users move through websites easily.

HTML uses the <a> element to create links. The word anchor is commonly used to describe this element.

What Is an HTML Link?

An HTML link is created using the <a> element and the href attribute.

Syntax

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

The href attribute specifies the destination of the link, while the text between <a> and </a> is displayed to the user.

Example

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

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

If you are new to HTML attributes, learn more about HTML Attributes before working with link attributes.

Linking to Another Website

You can create an external link that takes users to another website.

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

External links are useful when you want to provide additional resources, references, or related information from another website.

Linking to Another Page

HTML links can also connect different pages within the same website.

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

Here, /about.html points to another page on the same website.

For example, a website may have links such as:

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

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

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

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

Opening a Link in a New Tab

The target attribute can be used to control where a link opens.

To open a link in a new browser tab, use target="_blank".

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

When using _blank for external links, you can also add rel="noopener" for better security.

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

HTML Links with Images

An image can also be made clickable by placing an <img> element inside an <a> element.

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

When the user clicks the image, the browser opens the specified destination.

You can learn more about creating and displaying images in HTML Images.

Linking to an Email Address

The mailto: scheme can be used to create a link that opens the user’s default email application.

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

When clicked, the link can open an email composition window with the specified address.

Linking to a Phone Number

You can create a clickable phone link using the tel: scheme.

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

This is particularly useful on mobile-friendly websites.

Linking to a Section on the Same Page

You can create links that take users directly to a particular section of a webpage.

First, give the destination element an id.

<h2 id="html-links">HTML Links</h2>

Then create a link pointing to that ID.

<a href="#html-links">Go to HTML Links</a>

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

Absolute and Relative URLs

HTML links can use absolute or relative URLs.

An absolute URL contains the complete web address:

<a href="https://example.com/about.html">
    About
</a>

A relative URL points to a location relative to the current website:

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

Relative links are commonly used for internal website navigation.

HTML Link Best Practices

Use descriptive link text that clearly tells users where the link leads. Avoid vague text such as “Click here” when a more meaningful description can be used.

Keep internal links relevant to the surrounding content and make sure important pages are easy to reach through your website’s navigation.

HTML links are essential for connecting webpages and creating a useful website structure. When combined with descriptive text, relevant internal linking, and accessible navigation, they make websites easier for both users and search engines to understand.