With the HTML <link> tag, you can create hyperlinks to URLs, various types of media, files or other elements in HTML. Internal and external links help improve navigation, SEO performance and overall user experience. In addition to the <link> tag, you can also use the <a> tag along with other attributes to set up links.

What are HTML link tags?

HTML link tags (<a> and <link>) are used to connect internal or external resources to an HTML document. The <a> tag is used for adding hyperlinks to external or internal websites, as well as links to files, documents and downloads. The <link> tag, on the other hand, is used to include resources like style sheets, fonts and icons, which enhance functionality, usability and navigation within a web page.

What is the difference between <a> and <link>?

When creating hyperlinks to other web pages or adding external resources, you’ll typically use the HTML tags <a> or <link>, depending on what you want to link. Here’s how the two tags differ:

  • <a>: The <a> tag stands for “anchor” and is used to create hyperlinks to URLs or different types of media (e.g., images, graphics and videos). These links can point to elements on the same website or external resources.
  • <link>: The <link> tag is primarily used to integrate external resources like CSS style sheets, favicons, documents or fonts into an HTML document. It helps control how the page looks and behaves, and with features like canonical URLs and prefetching, it can also improve performance.

The key difference between the two is that <a> is mostly used for embedding hyperlinks, while <link> is mainly for including external elements like style sheets. <a> tags also usually appear within the <body> of the document, whereas <link> tags are found in the <head> section.

Web Hosting
Hosting that scales with your ambitions
  • Stay online with 99.99% uptime and robust security
  • Add performance with a click as traffic grows
  • Includes free domain, SSL, email, and 24/7 support

What is the syntax for HTML link tags?

In this section, we’ll take a look at the syntax for <a> und <link>.

Syntax for <a> tag

To properly use the <a> tag, you’ll need to use a few additional elements. These are:

  • href: The HTML href attribute defines which URL the link should point to. This can be an absolute or relative URL or an anchor link for information on the same page.
  • Link text or image tag: The opening tag is followed by the link text. This is the clickable text that appears on the page. If the link points to an image, an image tag should be used.

Other attributes that can be used with the <a> tag include:

  • target: Determines where the linked page will open, such as _blank for a new tab or window, or _parent for a parent frame
  • download: Automatically starts a download when a link is clicked on
  • title: Shows a title, tip or description when you hover over a link -rel: Defines the relationship between the current page and the linked page (for example, rel=nofollow tells search engines not to follow the link)

Example:

<a href="target-url">link text or image tag</a>
html

Syntax for <link> tag

The <link> tag in HTML is versatile. Depending on what you want to do, you can use different attributes in HTML together with the <link> tag.

Linking style sheets

If you want to include external CSS style sheets, you can use the syntax below:

<link rel="stylesheet" href="styles.css">
html

Linking favicons

You can use the following syntax to display small icons or images (favicons) next to URLs:

<link rel="icon" href="favicon.ico">
html

Prefetching

To improve website performance by preloading resources in the background, use this syntax:

<link rel="prefetch" href="next-page.html">
html

Canonical URLs or tags

If you have multiple URLs that lead to the same content and want to tell search engines which URL to prioritize, use the following code:

<link rel="canonical" href="https://example-url/canonical-url">
html

Linking alternative URLs

If you have different versions of the same page (e.g., in various languages), you can link them with:

<link rel="alternate" href="alternative-url.html" type="text/html" title="alternative page">
html
Tip

Take a look at our HTML beginner’s tutorial to learn more about the popular markup language.

What can HTML link tags be used for?

Here are some of the main ways HTML link tags are used:

  • Improving navigation with integrated menus and navigation bars
  • Embedding and linking to internal or external URLs or resources
  • Downloading documents and files
  • Efficient linking to internal pages through anchor links
  • Enhancing accessibility and search engine optimization
  • Improving website loading times and performance
Domain Name Registration
Build your brand on a great domain
  • Free Wildcard SSL for safer data transfers 
  • Free private registration for more privacy
  • Free Domain Connect for easy DNS setup
Was this article helpful?
Go to Main Menu