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­ig­a­tion, SEO per­form­ance and overall user ex­per­i­ence. In addition to the <link> tag, you can also use the <a> tag along with other at­trib­utes 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­ity, usability and nav­ig­a­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­form­ance.

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
The hosting your website deserves at an un­beat­able price
  • Loading 3x faster for happier customers
  • Rock-solid 99.99% uptime and advanced pro­tec­tion
  • Only at IONOS: up to 500 GB included

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­form­a­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­utes that can be used with the <a> tag include:

  • target: De­term­ines where the linked page will open, such as _blank for a new tab or window, or _parent for a parent frame
  • download: Auto­mat­ic­ally 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­utes 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­form­ance 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­it­ise, use the following code:

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

Linking al­tern­at­ive 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­ig­a­tion with in­teg­rated menus and nav­ig­a­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­cess­ib­il­ity and search engine op­tim­isa­tion
  • Improving website loading times and per­form­ance
Register your domain name
Launch your business on the right domain
  • Free WordPress with .co.uk
  • Free website pro­tec­tion with one Wildcard SSL
  • Free Domain Connect for easy DNS setup

Reviewer

  • Julia Hertler

    Julia Hertler

    With over 18 years of ex­per­i­ence in content marketing, Julia Hertler has deep expertise in digital com­mu­nic­a­tions. For the past 10 years, she has spe­cial­ised in the areas of domains and hosting at the IONOS Digital Guide, making complex technical topics easy to un­der­stand.

Go to Main Menu