Categories
HTML Web development

HTML link tag

HTML link tag

The HTML <link> element specifies the connection between the current document and an external resource.

The HTML <link> element is often used to link to external style sheets (CSS).

The HTML <link> tag is an empty element (it contains only attributes).

The HTML <link> element should be placed in the <head> section of the document.

Example:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="example-style.css">
</head>
<body>

<h4>This is a heading.</h4>

<p>This is a paragraph.</p>

<p>This is the second paragraph.</p>

</body>
</html>

Output:

HTML link tag

Attributes:

crossorigin (value- anonymous/ use-credentials) – defines how the tag handles cross-origin requests.

href (value- URL) – defines the location of the linked file.

Syntax:

<link href="URL"> 

hreflang (value- language_code) – defines the language of the text in the linked file.

Syntax:

<link hreflang="langauge_code"> 

media (value- media_query) – defines what kind of device the linked file will be displayed.

Syntax:

<link media="value"> 

Attribute values:

all (default) – all media type devices.

print – print preview mode/printed pages.

screen – computer screens, tablets, smartphones, etc…

speech – screenreaders that “reads” the page out loud.

referrer policy (value- no-referrer/ no-referrer-when-downgrade/ origin/ origin-when-cross-origin/ unsafe-url) – defines which referrer to use when fetching the resource.

rel (required), (value- alternate/ author/ dns-prefetch/ help/ icon/ license/ next/ pingback/ preconnect/ prefetch/ preload/ prerender/ prev/ search/ stylesheet) – defines the connection between the current document and the linked file.

Syntax:

<link rel="value"> 

size (value- HeightxWidth/ any) – defines the size of the linked resource. Only for rel=”icon“.

type (value- media_type) – defines the media type of the linked file.

Enjoy coding!