HTML Tags

HTML Link Tag

08/10/2022
HTML Link Types

The <link> tag used between the <head></head> tags is used to load resources outside the page into the page.

The rel="" attribute determines the use of the <link> tag.

<link> Tag for Style Files (rel=”stylesheet”)

The rel="stylesheet" link tag use to call the external CSS files used on the page.

<link rel="stylesheet" href="https://example.com/style.css" type="text/css" media="all" />

<link> Tag for Canonical (rel=”canonical”)

Use the canonical rel="canonical" <link> attribute, which it uses to specify the canonical URL of the page.

<link rel="canonical" href="https://example.com/"/>

<link> Tag for Favicon (rel=”icon”)

 

To add a favicon to the page, the rel="icon" <link> tag use in the page’s source code.

<link rel="icon" href="https://example.com/icon-32.png" sizes="32x32" />
<link rel="icon" href="https://example.com/icon-32.png" sizes="1922x922" />

<link> Tag for Language Versions of Pages (rel=alternate)

The rel="alternate" <link> tag use to specify alternative pages of web pages in foreign languages.

<link rel="alternate" href="https://juniortoexpert.com/de/" hreflang="de" /> 
<link rel="alternate" href="https://juniortoexpert.com/en/" hreflang="en" /> 
<link rel="alternate" href="https://juniortoexpert.com/tr/" hreflang="tr" /> 
<link rel="alternate" href="https://juniortoexpert.com/fr/" hreflang="fr" /> 
<link rel="alternate" href="https://juniortoexpert.com/" hreflang="x-default" />

<link> Tags for Page Load Performance

rel="dns-prefetch", rel="preconnect", rel="preload" are used to speed up the page load process.

rel=”dns-prefetch” <link> Tag

<link rel="dns-prefetch" href="https://tagmanager.google.com/" />

rel=”preconnect” <link> Tag

<link rel="preconnect" href="https://example.com">

rel=”preoad” <link> Tag

<link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2">

Is Link Tag Used Outside of <head> Tag?

It is recommended to use <link> tags inside <head> tags in HTML architecture, but the <link> tag works when positioned outside the <head> tag.

Source:

https://web.dev/