Definition and Usage

The <link> tag defines the relationship between the current document and an external resource.

The <link> tag is most often used to link to external style sheets or to add a favicon to your website.

The <link> element is an empty element, it contains attributes only.

Browser Support

Attributes

Attribute	Value	Description
crossorigin	anonymous use-credentials	Specifies how the element handles cross-origin requests
href	URL	Specifies the location of the linked document
hreflang	language_code	Specifies the language of the text in the linked document
media	media_query	Specifies on what device the linked document will be displayed
referrerpolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url	Specifies which referrer to use when fetching the resource
rel	alternate author dns-prefetch help icon license next pingback preconnect prefetch preload prerender prev search stylesheet	Required. Specifies the relationship between the current document and the linked document
sizes	HeightxWidth any	Specifies the size of the linked resource. Only for rel="icon"
title		Defines a preferred or an alternate stylesheet
type	media_type	Specifies the media type of the linked document

How to create HTML <link> Tag

Link to an external style sheet.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://www.w3schools.com/tags/styles.css">
</head>
<body>

<h1>Hello World!</h1>

<h2>I am formatted with a linked style sheet.</h2>

<p>Me too!</p>

</body>
</html>

Output should be:

How to create crossorigin Attributes on HTML <link> Tag

Setting the attribute name to an empty value, like crossorigin or crossorigin="", is the same as anonymous.

index.html

Example: HTML

<link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials" />

How to create HTML <link> href Attribute

Link to an external stylesheet.

Definition and Usage

The href attribute specifies the location (URL) of the external resource (most often a style sheet file).

Browser Support

Syntax

Attribute Values

Value	Description
URL	The URL of the linked resource/document. Possible values: An absolute URL - points to another web site (like href="http://www.example.com/theme.css") A relative URL - points to a file within a web site (like href="/themes/theme.css")

Value

Description

URL

The URL of the linked resource/document.

Possible values:

An absolute URL - points to another web site (like href="http://www.example.com/theme.css")
A relative URL - points to a file within a web site (like href="/themes/theme.css")

index.html

Example: HTML

<link rel="stylesheet" href="https://www.w3schools.com/tags/styles.css">

Output should be:

How to create HTML <link> hreflang Attribute

Here, the hreflang attribute indicates that the linked document is in English.

Definition and Usage

The hreflang attribute specifies the language of the text in the linked document.

This attribute is only used if the href attribute is set.

Note: This attribute is purely advisory.

Browser Support

Note: The hreflang attribute does not render as anything special in any of the major browsers. However, it can be used by search engines, or in scripts.

Syntax

Attribute Values

Value	Description
language_code	A two-letter language code that specifies the language of the linked document. To view all available language codes, go to our Language code reference.

index.html

Example: HTML

<link href="tag_link.asp" rel="parent" rev="subsection" hreflang="en">

Output should be:

How to create HTML <link> media Attribute

Two different style sheets for two different media types (screen and print).

Definition and Usage

The media attribute specifies what media/device the target resource is optimized for.

This attribute is mostly used with CSS style sheets to specify different styles for different media types.

The media attribute can accept several values.

Browser Support

Syntax

Possible Operators

Value	Description
and	Specifies an AND operator
not	Specifies a NOT operator
,	Specifies an OR operator

Devices

Value	Description
all	Default. Used for all media type devices
print	Used for Print preview mode/printed pages
screen	Used for computer screens, tablets, smart-phones etc.
speech	Used for screenreaders that "reads" the page out loud
aural	Deprecated. Speech synthesizers
braille	Deprecated. Braille feedback devices
handheld	Deprecated. Handheld devices (small screen, limited bandwidth)
projection	Deprecated. Projectors
tty	Deprecated. Teletypes and similar media using a fixed-pitch character grid
tv	Deprecated. Television type devices (low resolution, limited scroll ability)

Values

Value	Description
aspect-ratio	Specifies the width/height ratio of the targeted display area. "min-" and "max-" prefixes can be used. Example: media="screen and (max-aspect-ratio:16/9)"
color	Specifies the bits per color of target display. "min-" and "max-" prefixes can be used. Example: media="screen and (min-color:3)"
color-index	Specifies the number of colors the target display can handle. "min-" and "max-" prefixes can be used. Example: media="screen and (min-color-index:256)"
device-aspect-ratio	Deprecated. Specifies the device-width/device-height ratio of the target display/paper.
device-width	Deprecated. Specifies the width of the target display/paper.
device-height	Deprecated. Specifies the height of the target display/paper.
grid	Specifies if the output device is grid or bitmap. Possible values are "1" for grid, and "0" otherwise. Example: media="handheld and (grid:1)"
height	Specifies the height of the targeted display area. "min-" and "max-" prefixes can be used. Example: media="screen and (max-height:700px)"
monochrome	Specifies the bits per pixel in a monochrome frame buffer. "min-" and "max-" prefixes can be used. Example: media="screen and (min-monochrome:2)"
orientation	Specifies the orientation of the target display/paper. Possible values: "portrait" or "landscape" Example: media="all and (orientation: landscape)"
resolution	Specifies the pixel density (dpi or dpcm) of the target display/paper. "min-" and "max-" prefixes can be used. Example: media="print and (min-resolution:300dpi)"
scan	Specifies scanning method of a tv display. Possible values are "progressive" and "interlace". Example: media="tv and (scan:interlace)"
width	Specifies the width of the targeted display area. "min-" and "max-" prefixes can be used. Example: media="screen and (min-width:500px)"

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_screen.css">
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_print.css" media="print">
</head>
<body>

<h1>Horje Example</h1>
<p><a href="tryhtml_link_media.htm" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to use and value on HTML <link> media Attribute

and	Specifies an AND operator

index.html

Example: HTML

<link rel="stylesheet" type="text/css" href="demo_print.css" media="screen and (max-aspect-ratio:16/9)">

Output should be:

How to use not value on HTML <link> media Attribute

not	Specifies a NOT operator

index.html

Example: HTML

<link rel="stylesheet" type="text/css" href="demo_print.css" media="screen not (max-aspect-ratio:16/9)">

Output should be:

How to use , value on HTML <link> media Attribute

,	Specifies an OR operator

index.html

Example: HTML

<link rel="stylesheet" type="text/css" href="demo_print.css" media="screen , (max-aspect-ratio:16/9)">

Output should be:

How to use and print on HTML <link> media Attribute

Used for Print preview mode/printed pages

index.html

Example: HTML

<link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_print.css" media="print">

Output should be:

How to use all value on HTML <link> media Attribute

all	Default. Used for all media type devices

index.html

Example: HTML

<link href="mobile.css" rel="stylesheet" media="all" />

Output should be:

How to use print value on HTML <link> media Attribute

Used for Print preview mode/printed pages

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_screen.css">
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_print.css" media="print">
</head>
<body>

<h1>W3Schools Example</h1>
<p><a href="tryhtml_link_media.htm" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to use screen value on HTML <link> media Attribute

screen

Used for computer screens, tablets, smart-phones etc.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_screen.css">
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_print.css" media="screen and (min-color-index:256)">
</head>
<body>

<h1>Horje Example</h1>
<p><a href="tryhtml_link_media.htm" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to use speech value on HTML <link> media Attribute

speech

Used for screenreaders that "reads" the page out loud

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_screen.css">
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_print.css" media="speech">
</head>
<body>

<h1>W3Schools Example</h1>
<p><a href="tryhtml_link_media.htm" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to use speech value on HTML <link> media Attribute

aural

Deprecated. Speech synthesizers

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_screen.css">
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_print.css" media="aural">
</head>
<body>

<h1>Horje Example</h1>
<p><a href="tryhtml_link_media.htm" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to use braille value on HTML <link> media Attribute

braille

Deprecated. Braille feedback devices

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_screen.css">
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_print.css" media="braille">
</head>
<body>

<h1>Horje Example</h1>
<p><a href="tryhtml_link_media.htm" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to use handheld value on HTML <link> media Attribute

handheld

Handheld devices (small screen, limited bandwidth)

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_screen.css">
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_print.css" media="handheld">
</head>
<body>

<h1>Horje Example</h1>
<p><a href="tryhtml_link_media.htm" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to use projection value on HTML <link> media Attribute

projection

Projectors

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_screen.css">
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_print.css" media="projection">
</head>
<body>

<h1>Horje Example</h1>
<p><a href="tryhtml_link_media.htm" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to use tty value on HTML <link> media Attribute

tty	Deprecated. Teletypes and similar media using a fixed-pitch character grid

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_screen.css">
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_print.css" media="tty">
</head>
<body>

<h1>Horje Example</h1>
<p><a href="tryhtml_link_media.htm" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to use tv value on HTML <link> media Attribute

tv	Deprecated. Television type devices (low resolution, limited scroll ability)

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_screen.css">
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_print.css" media="tv and (scan:interlace)">
</head>
<body>

<h1>W3Schools Example</h1>
<p><a href="tryhtml_link_media.htm" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to use aspect-ratio value on HTML <link> media Attribute

aspect-ratio

Specifies the width/height ratio of the targeted display area.
"min-" and "max-" prefixes can be used.
Example: media="screen and (max-aspect-ratio:16/9)"

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_screen.css">
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_print.css" media="screen and (max-aspect-ratio:16/9)">
</head>
<body>

<h1>Horje Example</h1>
<p><a href="tryhtml_link_media.htm" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to use color value on HTML <link> media Attribute

color

Specifies the bits per color of target display.
"min-" and "max-" prefixes can be used.
Example: media="screen and (min-color:3)"

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_screen.css">
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_print.css" media="screen and (min-color:3)">
</head>
<body>

<h1>Horje Example</h1>
<p><a href="tryhtml_link_media.htm" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to use color-index value on HTML <link> media Attribute

color-index

Specifies the number of colors the target display can handle.
"min-" and "max-" prefixes can be used.
Example: media="screen and (min-color-index:256)"

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_screen.css">
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_print.css" media="screen and (min-color-index:256)">
</head>
<body>

<h1>Horje Example</h1>
<p><a href="tryhtml_link_media.htm" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to use device-aspect-ratio value on HTML <link> media Attribute

device-aspect-ratio

Deprecated. Specifies the device-width/device-height ratio of the target display/paper.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_screen.css">
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_print.css" media="screen and (min-device-aspect-ratio: 16/9)">
</head>
<body>

<h1>Horje Example</h1>
<p><a href="tryhtml_link_media.htm" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to use device-width value on HTML <link> media Attribute

device-width

Deprecated. Specifies the width of the target display/paper.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_screen.css">
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_print.css" media="screen and (max-device-width: 799px)">
</head>
<body>

<h1>Horje Example</h1>
<p><a href="tryhtml_link_media.htm" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to use device-height value on HTML <link> media Attribute

device-height

Deprecated. Specifies the height of the target display/paper.

index.html

Example: HTML

<link
  rel="stylesheet"
  media="screen and (max-device-height: 799px)"
  href="https://www.w3schools.com/tags/demo_screen.css" />

Output should be:

How to use grid value on HTML <link> media Attribute

grid	Specifies if the output device is grid or bitmap. Possible values are "1" for grid, and "0" otherwise. Example: media="handheld and (grid:1)"

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_screen.css">
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_print.css" media="handheld and (grid:1)">
</head>
<body>

<h1>Horje Example</h1>
<p><a href="tryhtml_link_media.htm" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to use height value on HTML <link> media Attribute

height

Specifies the height of the targeted display area.
"min-" and "max-" prefixes can be used.
Example: media="screen and (max-height:700px)"

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_screen.css">
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_print.css" media="screen and (max-height:700px)">
</head>
<body>

<h1>Horje Example</h1>
<p><a href="tryhtml_link_media.htm" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to use monochrome value on HTML <link> media Attribute

monochrome

Specifies the bits per pixel in a monochrome frame buffer.
"min-" and "max-" prefixes can be used.
Example: media="screen and (min-monochrome:2)"

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_screen.css">
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_print.css" media="screen and (min-monochrome:2)">
</head>
<body>

<h1>Horje Example</h1>
<p><a href="tryhtml_link_media.htm" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to use orientation value on HTML <link> media Attribute

orientation

Specifies the orientation of the target display/paper.
Possible values: "portrait" or "landscape"
Example: media="all and (orientation: landscape)"

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_screen.css">
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_print.css" media="all and (orientation: landscape)">
</head>
<body>

<h1>Horje Example</h1>
<p><a href="tryhtml_link_media.htm" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to use resolution value on HTML <link> media Attribute

resolution

Specifies the pixel density (dpi or dpcm) of the target display/paper.
"min-" and "max-" prefixes can be used.
Example: media="print and (min-resolution:300dpi)"

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_screen.css">
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_print.css" media="print and (min-resolution:300dpi)">
</head>
<body>

<h1>Horje Example</h1>
<p><a href="tryhtml_link_media.htm" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to use scan value on HTML <link> media Attribute

scan	Specifies scanning method of a tv display. Possible values are "progressive" and "interlace". Example: media="tv and (scan:interlace)"

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_screen.css">
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_print.css" media="tv and (scan:interlace)">
</head>
<body>

<h1>Horje Example</h1>
<p><a href="tryhtml_link_media.htm" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to use width value on HTML <link> media Attribute

width

Specifies the width of the targeted display area.
"min-" and "max-" prefixes can be used.
Example: media="screen and (min-width:500px)"

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_screen.css">
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_print.css" media="screen and (min-width:500px)">
</head>
<body>

<h1>Horje Example</h1>
<p><a href="tryhtml_link_media.htm" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>

</body>
</html>

Output should be:

How to create HTML <iframe> referrerpolicy Attribute on HTML <link> Tag

Definition and Usage

The referrerpolicy attribute specifies which referrer information to send when fetching an iframe.

Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

Attribute Values

Value	Description
no-referrer	No referrer information will be sent along with a request
no-referrer-when-downgrade	Default. The referrer header will not be sent to origins without HTTPS
origin	Send only scheme, host, and port to the request client
origin-when-cross-origin	For cross-origin requests: Send only scheme, host, and port. For same-origin requests: Also include the path
same-origin	For same-origin requests: Referrer info will be sent. For cross-origin requests: No referrer info will be sent
strict-origin	Only send referrer info if the security level is the same (e.g. HTTPS to HTTPS). Do not send to a less secure destination (e.g. HTTPS to HTTP)
strict-origin-when-cross-origin	Send full path when performing a same-origin request. Send only origin when the security level stays the same (e.g. HTTPS to HTTPS). Send no header to a less secure destination (HTTPS to HTTP)
unsafe-url	Send origin, path and query string (but not fragment, password, or username). This value is considered unsafe

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The iframe referrerpolicy attribute</h1>

<iframe src="https://horje.com/" referrerpolicy="no-referrer">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>

Output should be:

How to create HTML <iframe> no-referrer Attribute on HTML <link> Tag

no-referrer

No referrer information will be sent along with a request

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The iframe referrerpolicy attribute</h1>

<iframe src="https://w3schools.com/" referrerpolicy="no-referrer">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>

Output should be:

How to create HTML <iframe> no-referrer-when-downgrade Attribute on HTML <link> Tag

no-referrer-when-downgrade

Default. The referrer header will not be sent to origins without HTTPS

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The iframe referrerpolicy attribute</h1>

<iframe src="https://w3schools.com/" referrerpolicy="no-referrer-when-downgrade">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>

Output should be:

How to create HTML <iframe> origin Attribute on HTML <link> Tag

origin

Send only scheme, host, and port to the request client

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The iframe referrerpolicy attribute</h1>

<iframe src="https://horje.com/" referrerpolicy="origin">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>

Output should be:

How to create HTML <iframe> origin-when-cross-origin Attribute on HTML <link> Tag

origin-when-cross-origin

For cross-origin requests: Send only scheme, host, and port. For same-origin requests: Also include the path

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The iframe referrerpolicy attribute</h1>

<iframe src="https://horje.com" referrerpolicy="origin-when-cross-origin">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>

Output should be:

How to create HTML <iframe> same-origin Attribute on HTML <link> Tag

same-origin

For same-origin requests: Referrer info will be sent. For cross-origin requests: No referrer info will be sent

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The iframe referrerpolicy attribute</h1>

<iframe src="https://horje.com" referrerpolicy="same-origin">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>

Output should be:

How to create HTML <iframe> strict-origin Attribute on HTML <link> Tag

strict-origin

Only send referrer info if the security level is the same (e.g. HTTPS to HTTPS). Do not send to a less secure destination (e.g. HTTPS to HTTP)

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The iframe referrerpolicy attribute</h1>

<iframe src="https://horje.com" referrerpolicy="strict-origin">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>

Output should be:

How to create HTML <iframe> strict-origin-when-cross-origin Attribute on HTML <link> Tag

strict-origin-when-cross-origin

Send full path when performing a same-origin request. Send only origin when the security level stays the same (e.g. HTTPS to HTTPS). Send no header to a less secure destination (HTTPS to HTTP)

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The iframe referrerpolicy attribute</h1>

<iframe src="https://horje.com" referrerpolicy="strict-origin-when-cross-origin">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>

Output should be:

How to create HTML <iframe> unsafe-url Attribute on HTML <link> Tag

unsafe-url

Send origin, path and query string (but not fragment, password, or username). This value is considered unsafe

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The iframe referrerpolicy attribute</h1>

<iframe src="https://horje.com" referrerpolicy="unsafe-url">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>

Output should be:

How to add HTML <link> rel Attribute

Definition and Usage

The required rel attribute specifies the relationship between the current document and the linked document/resource.

Browser Support

Syntax

Attribute Values

Value	Description
alternate	Provides a link to an alternate version of the document (i.e. print page, translated or mirror). Example: <link rel="alternate" type="application/atom+xml" title="W3Schools News" href="/blog/news/atom">
author	Provides a link to the author of the document
dns-prefetch	Specifies that the browser should preemptively perform DNS resolution for the target resource's origin
help	Provides a link to a help document. Example: <link rel="help" href="/help/">
icon	Imports an icon to represent the document. Example: <link rel="icon" href="favicon.ico" type="image/x-icon">
license	Provides a link to copyright information for the document
next	Provides a link to the next document in the series
pingback	Provides the address of the pingback server that handles pingbacks to the current document
preconnect	Specifies that the browser should preemptively connect to the target resource's origin.
prefetch	Specifies that the browser should preemptively fetch and cache the target resource as it is likely to be required for a follow-up navigation
preload	Specifies that the browser agent must preemptively fetch and cache the target resource for current navigation according to the destination given by the "as" attribute (and the priority associated with that destination).
prerender	Specifies that the browser should pre-render (load) the specified webpage in the background. So, if the user navigates to this page, it speeds up the page load (because the page is already loaded). Warning! This wastes the user's bandwidth! Only use prerender if you are absolutely sure that the webpage is required at some point in the user's journey
prev	Indicates that the document is a part of a series, and that the previous document in the series is the referenced document
search	Provides a link to a resource that can be used to search through the current document and its related pages.
stylesheet	Imports a style sheet

index.html

Example: HTML

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

Output should be:

How to add HTML alternate <link> rel Attribute

alternate

Provides a link to an alternate version of the document (i.e. print page, translated or mirror).
Example: <link rel="alternate" type="application/atom+xml" title="W3Schools News" href="/blog/news/atom">

index.html

Example: HTML

<link rel="alternate" type="application/atom+xml" title="Horje News" href="/blog/news/atom">

Output should be:

How to add HTML author <link> rel Attribute

author

Provides a link to the author of the document

index.html

Example: HTML

<a href="/author-page.html" rel="author">link text</a>

Output should be:

How to add HTML dns-prefetch <link> rel Attribute

dns-prefetch

Specifies that the browser should preemptively perform DNS resolution for the target resource's origin

index.html

Example: HTML

<link rel="dns-prefetch stylesheet" href="https://css.static.com/mystyle.css" >

Output should be:

How to add HTML help <link> rel Attribute

help	Provides a link to a help document. Example: <link rel="help" href="/help/">

index.html

Example: HTML

<link rel="help" href="/help/">

Output should be:

How to add HTML icon <link> rel Attribute

icon	Imports an icon to represent the document. Example: <link rel="icon" href="favicon.ico" type="image/x-icon">

index.html

Example: HTML

<link rel="icon" href="favicon.ico" type="image/x-icon">

Output should be:

How to add HTML license <link> rel Attribute

license

Provides a link to copyright information for the document

index.html

Example: HTML

<link rel="license" href="#license" />

Output should be:

How to add HTML next <link> rel Attribute

next	Provides a link to the next document in the series

index.html

Example: HTML

<link rel="next" href="https://www.example.com/article?story=abc&page=2" />

Output should be:

How to add HTML pingback <link> rel Attribute

pingback

Provides the address of the pingback server that handles pingbacks to the current document

index.html

Example: HTML

<link rel="pingback" href="pingback server">

Output should be:

How to add HTML preconnect <link> rel Attribute

preconnect

Specifies that the browser should preemptively connect to the target resource's origin.

index.html

Example: HTML

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

Output should be:

How to add HTML prefetch <link> rel Attribute

prefetch

Specifies that the browser should preemptively fetch and cache the target resource as it is likely to be required for a follow-up navigation

rel=prefetch

The prefetch keyword for the rel attribute of the <link> element provides a hint to browsers that the user is likely to need the target resource for future navigations, and therefore the browser can likely improve the user experience by preemptively fetching and caching the resource. <link rel="prefetch"> is used for same-site navigation resources, or for subresources used by same-site pages.

The result is kept in the HTTP cache on disk. Because of this it is useful for prefetching subresources, even if they are not used by the current page. You could also use it to prefetch the next document the user will likely visit on the site. However, as a result you need to be careful with headers — for example certain Cache-Control headers could block prefetching (for example no-cache or no-store).

Note: Because of such limitations, you are advised to use the Speculation Rules API for document prefetches instead, where it is supported.

<link rel="prefetch"> is functionally equivalent to a fetch() call with a priority: "low" option set on it, except that the former will generally have an even lower priority, and it will have a Sec-Purpose: prefetch header set on the request. Note that in general browsers will give prefetch resources a lower priority than preload ones (e.g. requested via <link rel="preload">) — the current page is more important than the next.

The fetch request for a prefetch operation results in an HTTP request that includes the HTTP header Sec-Purpose: prefetch. A server might use this header to change the cache timeouts for the resources, or perform other special handling. The request will also include the Sec-Fetch-Dest header with the value set to empty.

The Accept header in the request will match the value used for normal navigation requests. This allows the browser to find the matching cached resources following navigation.

index.html

Example: HTML

<link rel="prefetch" href="/landing-page" />

Output should be:

How to add HTML preload <link> rel Attribute

preload

Specifies that the browser agent must preemptively fetch and cache the target resource for current navigation according to the destination given by the "as" attribute (and the priority associated with that destination).

The preload value of the <link> element's rel attribute lets you declare fetch requests in the HTML's <head>, specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in. This ensures they are available earlier and are less likely to block the page's render, improving performance. Even though the name contains the term load, it doesn't load and execute the script but only schedules it to be downloaded and cached with a higher priority.

index.html

Example: HTML

<link rel="preload" href="style.css" as="style" />

Output should be:

How to add HTML prerender <link> rel Attribute

prerender

Specifies that the browser should pre-render (load) the specified webpage in the background. So, if the user navigates to this page, it speeds up the page load (because the page is already loaded). Warning! This wastes the user's bandwidth! Only use prerender if you are absolutely sure that the webpage is required at some point in the user's journey

index.html

Example: HTML

<link rel="prerender" href="/next-page">

How to add HTML prev <link> rel Attribute

prev	Indicates that the document is a part of a series, and that the previous document in the series is the referenced document

A rel="prev" attribute value on a link specifies that the linked page is the previous page of the current page.

This can be used for articles, galleries, news, and other page in a series of pages.

A rel="prev" on an <a> element.
This link opens the previous page in a list of pages

index.html

Example: HTML

Go back to the <a rel="prev" href="/html/rel/license">previous page</a>

Output should be:

How to add HTML search <link> rel Attribute

A rel="search" on an <a> element.
This link is a Google search query with a filter for the current site.

Provides a link to a resource that can be used to search through the current document and its related pages.

index.html

Example: HTML

To discover more:
 <a rel="search" href="https://google.com/search?q=site:dofactory.com" 
    target="_blank">Search here</a>.

Output should be:

How to add HTML stylesheet <link> rel Attribute

The rel='stylesheet' attribute is used to define the relationship between the linked file and the current HTML document.

The rel stands for "relationship", and is probably one of the key features of the <link> element — the value denotes how the item being linked to is related to the containing current document.

The current HTML document needs to tell the browser what you were linking to using the rel tag, otherwise the browser would have no idea what to do with the content you're linking to.

stylesheet

Imports a style sheet

index.html

Example: HTML

<link href='style.css' rel='stylesheet'>

How to add HTML <link> sizes Attribute

Icon with specified size:

Definition and Usage

The sizes attribute specifies the sizes of icons for visual media.

This attribute is only used if rel="icon".

Browser Support

Syntax

Attribute Values

Value

Description

HeightxWidth

Specifies one or more sizes for the linked icon.
The height and width values are separated by an "x" or "X".

Examples:

<link rel="icon" href="favicon.png" sizes="16x16" type="image/png"> (1 size)
<link rel="icon" href="favicon.png" sizes="16x16 32x32" type="image/png"> (2 sizes)

any

Specifies that the icon is scalable (like an SVG image)

Examples:

<link rel="icon" href="icon.svg" sizes="any" type="image/svg+xml"> (any size)

index.html

Example: HTML

 <link rel="icon" href="demo_icon.gif" type="image/gif" sizes="16x16">

Output should be:

How to add HTML <link> sizes HeightxWidth Attribute

any	Specifies that the icon is scalable (like an SVG image) Examples: <link rel="icon" href="icon.svg" sizes="any" type="image/svg+xml"> (any size)

<link rel="icon" href="demo_icon.gif" type="image/gif" sizes="16x16">

Output should be:

How to add HTML <link> any sizes Attribute

any	Specifies that the icon is scalable (like an SVG image) Examples: <link rel="icon" href="icon.svg" sizes="any" type="image/svg+xml"> (any size)

index.html

Example: HTML

<link rel="icon" href="demo_icon.gif" type="image/gif" sizes="any">

Output should be:

How to add HTML <link> title Attribute

title

Defines a preferred or an alternate stylesheet

index.html

Example: HTML

<link rel="stylesheet" 
type="text/css" href="paul.css" 
title="bog standard" />

How to add HTML <link> type Attribute

In the following example, the type attribute indicates that the linked document is an external style sheet:

Definition and Usage

The type attribute specifies the media type of the linked document/resource.

The most common value of type is "text/css". If you omit the type attribute, the browser will look at the rel attribute to guess the correct type. So, if rel="stylesheet", the browser will assume the type is "text/css".

Browser Support

Syntax

Attribute Values

Value	Description
media_type	The media type of the linked document. Look at IANA Media Types for a complete list of standard media types

index.html

Example: HTML

 <head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

Output should be:

What is HTML <!--...--> Tag	HTML Tag
What is HTML <!DOCTYPE> Declaration	HTML Tag
What is HTML Elements and Doctypes	HTML Tag
What is HTML <a> Tag	HTML Tag
What is HTML <abbr> Tag	HTML Tag
What is HTML <acronym> Tag	HTML Tag
What is HTML <address> Tag	HTML Tag
What is HTML <applet> Tag	HTML Tag
What is HTML <area> Tag	HTML Tag
What is HTML <article> Tag	HTML Tag
What is HTML <aside> Tag	HTML Tag
What is HTML <audio> Tag	HTML Tag
What is HTML <b> Tag	HTML Tag
What is HTML <base> Tag	HTML Tag
What is HTML <basefont> Tag	HTML Tag
What is HTML <bdi> Tag	HTML Tag
What is HTML <bdo> Tag	HTML Tag
What is HTML <big> Tag	HTML Tag
What is HTML <blockquote> Tag	HTML Tag
What is HTML <body> Tag	HTML Tag
What is HTML <br> Tag	HTML Tag
What is HTML <button> Tag	HTML Tag
What is HTML <canvas> Tag	HTML Tag
What is HTML <caption> Tag	HTML Tag
What is HTML <center> Tag	HTML Tag
What is HTML <cite> Tag	HTML Tag
What is HTML <code> Tag	HTML Tag
What is HTML <col> Tag	HTML Tag
How to create HTML <colgroup> Tag	HTML Tag
What is HTML <data> Tag	HTML Tag
What is HTML <datalist> Tag	HTML Tag
What is HTML <dd> Tag	HTML Tag
What is HTML <del> Tag	HTML Tag
What is HTML <details> Tag	HTML Tag
What is HTML <dfn> Tag	HTML Tag
What is HTML <dialog> Tag	HTML Tag
What is HTML <dir> Tag	HTML Tag
What is HTML <div> Tag	HTML Tag
What is HTML <dl> Tag	HTML Tag
What is HTML <dt> Tag	HTML Tag
What is HTML <em> Tag	HTML Tag
What is HTML <embed> Tag	HTML Tag
What is HTML <fieldset> Tag	HTML Tag
What is HTML <figcaption> Tag	HTML Tag
What is HTML <figure> Tag	HTML Tag
What is HTML <font> Tag	HTML Tag
What is HTML <footer> Tag	HTML Tag
What is HTML <form> Tag	HTML Tag
What is HTML <frame> Tag	HTML Tag
What is HTML <frameset> Tag	HTML Tag
What is HTML <h1> to <h6> Tags	HTML Tag
What is HTML <head> Tag	HTML Tag
What is HTML <header> Tag	HTML Tag
What is HTML <hgroup> Tag	HTML Tag
What is HTML <hr> Tag	HTML Tag
What is HTML <html> Tag	HTML Tag
What is HTML <i> Tag	HTML Tag
What is HTML <iframe> Tag	HTML Tag
What is HTML <img> Tag	HTML Tag
What is HTML <input> Tag	HTML Tag
What is HTML <ins> Tag	HTML Tag
What is HTML <kbd> Tag	HTML Tag
What is HTML <label> Tag	HTML Tag
What is HTML <legend> Tag	HTML Tag
What is HTML <li> Tag	HTML Tag
What is HTML <link> Tag	HTML Tag
What is HTML <main> Tag	HTML Tag
What is HTML <map> Tag	HTML Tag
What is HTML <mark> Tag	HTML Tag
What is HTML <menu> Tag	HTML Tag
What is HTML <meta> Tag	HTML Tag

Single Articles

How to create HTML <link> Tag	HTML Tag
How to create crossorigin Attributes on HTML <link> Tag	HTML Tag
How to create HTML <link> href Attribute	HTML Tag
How to create HTML <link> hreflang Attribute	HTML Tag
How to create HTML <link> media Attribute	HTML Tag
How to use and value on HTML <link> media Attribute	HTML Tag
How to use not value on HTML <link> media Attribute	HTML Tag
How to use , value on HTML <link> media Attribute	HTML Tag
How to use and print on HTML <link> media Attribute	HTML Tag
How to use all value on HTML <link> media Attribute	HTML Tag
How to use print value on HTML <link> media Attribute	HTML Tag
How to use screen value on HTML <link> media Attribute	HTML Tag
How to use speech value on HTML <link> media Attribute	HTML Tag
How to use speech value on HTML <link> media Attribute	HTML Tag
How to use braille value on HTML <link> media Attribute	HTML Tag
How to use handheld value on HTML <link> media Attribute	HTML Tag
How to use projection value on HTML <link> media Attribute	HTML Tag
How to use tty value on HTML <link> media Attribute	HTML Tag
How to use tv value on HTML <link> media Attribute	HTML Tag
How to use aspect-ratio value on HTML <link> media Attribute	HTML Tag
How to use color value on HTML <link> media Attribute	HTML Tag
How to use color-index value on HTML <link> media Attribute	HTML Tag
How to use device-aspect-ratio value on HTML <link> media Attribute	HTML Tag
How to use device-width value on HTML <link> media Attribute	HTML Tag
How to use device-height value on HTML <link> media Attribute	HTML Tag
How to use grid value on HTML <link> media Attribute	HTML Tag
How to use height value on HTML <link> media Attribute	HTML Tag
How to use monochrome value on HTML <link> media Attribute	HTML Tag
How to use orientation value on HTML <link> media Attribute	HTML Tag
How to use resolution value on HTML <link> media Attribute	HTML Tag
How to use scan value on HTML <link> media Attribute	HTML Tag
How to use width value on HTML <link> media Attribute	HTML Tag
How to create HTML <iframe> referrerpolicy Attribute on HTML <link> Tag	HTML Tag
How to create HTML <iframe> no-referrer Attribute on HTML <link> Tag	HTML Tag
How to create HTML <iframe> no-referrer-when-downgrade Attribute on HTML <link> Tag	HTML Tag
How to create HTML <iframe> origin Attribute on HTML <link> Tag	HTML Tag
How to create HTML <iframe> origin-when-cross-origin Attribute on HTML <link> Tag	HTML Tag
How to create HTML <iframe> same-origin Attribute on HTML <link> Tag	HTML Tag
How to create HTML <iframe> strict-origin Attribute on HTML <link> Tag	HTML Tag
How to create HTML <iframe> strict-origin-when-cross-origin Attribute on HTML <link> Tag	HTML Tag
How to create HTML <iframe> unsafe-url Attribute on HTML <link> Tag	HTML Tag
How to add HTML <link> rel Attribute	HTML Tag
How to add HTML alternate <link> rel Attribute	HTML Tag
How to add HTML author <link> rel Attribute	HTML Tag
How to add HTML dns-prefetch <link> rel Attribute	HTML Tag
How to add HTML help <link> rel Attribute	HTML Tag
How to add HTML icon <link> rel Attribute	HTML Tag
How to add HTML license <link> rel Attribute	HTML Tag
How to add HTML next <link> rel Attribute	HTML Tag
How to add HTML pingback <link> rel Attribute	HTML Tag
How to add HTML preconnect <link> rel Attribute	HTML Tag
How to add HTML prefetch <link> rel Attribute	HTML Tag
How to add HTML preload <link> rel Attribute	HTML Tag
How to add HTML prerender <link> rel Attribute	HTML Tag
How to add HTML prev <link> rel Attribute	HTML Tag
How to add HTML search <link> rel Attribute	HTML Tag
How to add HTML stylesheet <link> rel Attribute	HTML Tag
How to add HTML <link> sizes Attribute	HTML Tag
How to add HTML <link> sizes HeightxWidth Attribute	HTML Tag
How to add HTML <link> any sizes Attribute	HTML Tag
How to add HTML <link> title Attribute	HTML Tag
How to add HTML <link> type Attribute	HTML Tag

Read Full::	HTML Tag
Category:	Web Tutorial
Sub Category:	HTML Tag
Uploaded:	3 months ago
Uploaded by:	Admin
Views:	1
Ref on:	View