HTML external links are hyperlinks that point from your website to a page, resource, or website hosted on a different domain. They are commonly used to reference useful resources, documentation, tools, articles, social media profiles, and other websites.

External links are created using the HTML <a> element with an absolute URL in the href attribute.

If you are new to HTML links, first learn about HTML Links and HTML Link Syntax.

What Are External Links?

An external link connects your webpage to a resource located on another website or domain.

Example

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

Here, the complete URL points to another website, making it an external link.

External links are different from internal links, which connect pages within the same website.

Using Absolute URLs for External Links

External links normally use absolute URLs because the complete destination needs to be specified.

<a href="https://www.wikipedia.org">
    Visit Wikipedia
</a>

The URL includes the protocol and domain name.

For a detailed explanation of complete web addresses, see HTML Absolute URLs.

Opening an External Link in a New Tab

You can use the target attribute to open an external link in a new browsing context.

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

The _blank value usually causes the destination to open in a new tab.

When using _blank, you can also use rel="noopener":

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

You can learn more about link behavior in HTML Link Targets.

Using the rel Attribute

The rel attribute describes the relationship between your webpage and the linked resource.

For example:

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

Common values include noopener, noreferrer, and nofollow. The appropriate value depends on why you are linking to the external resource.

For more information, see HTML Link Attributes.

External Links in Navigation Menus

External links can also be included in navigation menus.

<nav>
    <a href="/html/">HTML</a>
    <a href="/css/">CSS</a>
    <a href="https://example.com">
        External Resource
    </a>
</nav>

Here, the first two links point to pages on the same website, while the third link points to another website.

Using clear link text helps visitors understand where each link leads.

External Links to Documentation

External links are useful when you want to provide additional technical resources.

<p>
    Learn more about HTML from
    <a href="https://developer.mozilla.org/">
        MDN Web Docs
    </a>.
</p>

This allows readers to access additional information without manually copying a URL.

External Links to Social Media

You can create links to social media profiles using the same <a> element.

<a href="https://www.example.com/social">
    Follow Us
</a>

Replace the URL with the appropriate profile address.

External Links vs Internal Links

The main difference is the destination.

An internal link points to another page or resource within the same website:

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

An external link points to another domain:

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

Relative URLs are commonly used for internal links, while absolute URLs are commonly used for external links. Learn more about relative paths in HTML Relative URLs.

Best Practices for External Links

Use descriptive anchor text that tells users what they can expect after clicking the link. Avoid using vague phrases such as “click here” when a more meaningful description is possible.

Check external links regularly to make sure they still work and lead to the intended resource. When opening links in a new tab, use appropriate rel values when needed.

External links are an important part of the web because they connect websites and allow users to discover additional information, tools, resources, and references.