With the HTML <link> tag, you can create hy­per­links to URLs, various types of media, files or other elements in HTML. Internal and external links help improve nav­i­ga­tion, SEO per­for­mance and overall user ex­pe­ri­ence. In addition to the <link> tag, you can also use the <a> tag along with other at­trib­ut­es 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 hy­per­links 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 func­tion­al­i­ty, usability and nav­i­ga­tion within a web page.

What is the dif­fer­ence between <a> and <link>?

When creating hy­per­links 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 hy­per­links 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 prefetch­ing, it can also improve per­for­mance.

The key dif­fer­ence between the two is that <a> is mostly used for embedding hy­per­links, 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 per­for­mance 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 ad­di­tion­al 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 in­for­ma­tion 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 at­trib­ut­es that can be used with the <a> tag include:

  • target: De­ter­mines where the linked page will open, such as _blank for a new tab or window, or _parent for a parent frame
  • download: Au­to­mat­i­cal­ly starts a download when a link is clicked on
  • title: Shows a title, tip or de­scrip­tion when you hover over a link -rel: Defines the re­la­tion­ship 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 at­trib­ut­es 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

Prefetch­ing

To improve website per­for­mance by pre­load­ing resources in the back­ground, 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 pri­or­i­tize, use the following code:

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

Linking al­ter­na­tive 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 nav­i­ga­tion with in­te­grat­ed menus and nav­i­ga­tion bars
  • Embedding and linking to internal or external URLs or resources
  • Down­load­ing documents and files
  • Efficient linking to internal pages through anchor links
  • Enhancing ac­ces­si­bil­i­ty and search engine op­ti­miza­tion
  • Improving website loading times and per­for­mance
Domain Name Reg­is­tra­tion
Build your brand on a great domain
  • Free Wildcard SSL for safer data transfers 
  • Free private reg­is­tra­tion for more privacy
  • Free Domain Connect for easy DNS setup
Go to Main Menu