Horje
What is HTML <link> Tag | HTML Tag Code
What is HTML <link> Tag

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 HTML <link> Tag

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

<link href="URL">

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")
index.html
Example: HTML
<link rel="stylesheet" href="https://www.w3schools.com/tags/styles.css">

Output should be:

How to create HTML <link> href Attribute

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

<link hreflang="langauge_code">

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> hreflang Attribute

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

<link media="value">

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 create HTML <link> media Attribute

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 and value on HTML <link> media Attribute

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 not value on HTML <link> media Attribute

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 , value on HTML <link> media Attribute

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

print 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 and print on HTML <link> media Attribute

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 all value on HTML <link> media Attribute



Read Full::
HTML Tag Code
Category:
HTML Code
Sub Category:
HTML Tag Code
Uploaded:
1 week ago
Uploaded by:
Admin
Views:
24

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

Single Articles
How to create HTML <link> Tag
How to create crossorigin Attributes on HTML <link> Tag
How to create HTML <link> href Attribute
How to create HTML <link> hreflang Attribute
How to create HTML <link> media Attribute
How to use and value on HTML <link> media Attribute
How to use not value on HTML <link> media Attribute
How to use , value on HTML <link> media Attribute
How to use and print on HTML <link> media Attribute
How to use all value on HTML <link> media Attribute

Share on: