HTML <link> Attribute

HTML <link> charset Attribute


Example

The charset attribute indicates that the linked document is written in Japanese:

<link href=”domoarigato.htm” rel=”parent” charset=”ISO-2022-JP”>

Definition and Usage

The <link> charset attribute is not supported in HTML5.

The charset attribute specifies the character encoding of the linked document.

The default character-set for modern browsers is ISO-8859-1.

Syntax

<link charset=”character_set”>

Attribute Values

Value Description
character_set The character encoding of the linked document.Common values:

  • UTF-8 – Character encoding for Unicode
  • ISO-8859-1 – Character encoding for the Latin alphabet

In theory, any character encoding can be used, but no browser understands all of them. The more widely a character encoding is used, the better the chance that a browser will understand it.

To view all available character encodings, go to our Character sets reference.

HTML <link> type Attribute

Example

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

<head>
<link rel=”stylesheet” type=”text/css” href=”theme.css”>
</head>

Try it Yourself »


Definition and Usage

The type attribute specifies the Internet media type (formerly known as MIME type) of the linked document/resource.

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


 

Syntax

<link type=”media_type”>

Attribute Values

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

HTML <link> target Attribute

Example

In the following example, the linked document is loaded in a new window:

<head>
<link rel=”parent” href=”wildcats.htm” target=”_blank”>
</head>

Definition and Usage

The <link> target attribute is not supported in HTML5.

The target attribute specifies a window or a frame where the linked document is loaded.


Syntax

<link target=”_blank|_self|_parent|_top|framename“>

Attribute Values

Value Description
_blank Load in a new window
_self Load in the same frame as it was clicked
_parent Load in the parent frameset
_top Load in the full body of the window
framename Load in a named frame

HTML <link> sizes Attribute

Example

Icon with specified size:

<link rel=”icon” href=”demo_icon.gif” type=”image/gif” sizes=”16×16″>

Try it Yourself »


Definition and Usage

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

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


Differences Between HTML 4.01 and HTML5

The sizes attribute is new in HTML5.


Syntax

<link sizes=”HeightxWidth|any”>

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=”16×16″ type=”image/png”> (1 size)
  • <link rel=”icon” href=”favicon.png” sizes=”16×16 32×32″ 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)

HTML <link> rev Attribute

Example

In the following example, the rev attribute indicates that the current document is the parent of the “wildcats.htm” page:

<head>
<link rev=”parent” href=”wildcats.htm”>
</head>

Definition and Usage

The <link> rev attribute is not supported in HTML5.

The rev attribute specifies the relationship between the linked document and the current document.

The rev attribute is the reverse of the rel attribute.


Syntax

<link rev=”value“>

Attribute Values

Value Description
alternate An alternate version of the document (i.e. print page, translated or mirror)
stylesheet An external style sheet for the document
start The first document in a selection
next The next document in a selection
prev The previous document in a selection
contents A table of contents for the document
index An index for the document
glossary A glossary (explanation) of words used in the document
copyright A document containing copyright information
chapter A chapter of the document
section A section of the document
subsection A subsection of the document
appendix An appendix for the document
help A help document
bookmark A related document

HTML <link> rel Attribute

Example

An external stylesheet:

<link rel=”stylesheet” type=”text/css” href=”theme.css”>

Try it Yourself »


Definition and Usage

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


Differences Between HTML 4.01 and HTML5

Some HTML 4.01 values are removed from HTML5, and some new values are added to HTML5.


Syntax

<link rel=”value“>

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).
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

HTML <link> media Attribute

Example

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

<head>
<link rel=”stylesheet” type=”text/css” href=”theme.css”>
<link rel=”stylesheet” type=”text/css” href=”print.css” media=”print”>
</head>

Definition and Usage

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

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

The media attribute can accept several values.


Differences Between HTML 4.01 and HTML5

The media attribute now supports more values.


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)”

HTML <link> hreflang Attribute

Example

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

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

Try it Yourself »


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.


Differences Between HTML 4.01 and HTML5

NONE.


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.

HTML <link> href Attribute

Example

Link to an external stylesheet:

<link rel=”stylesheet” type=”text/css” href=”theme.css”>

Try it Yourself »


Definition and Usage

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


Differences Between HTML 4.01 and HTML5

NONE.


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”)