HTML <link/> Tag for External Resources

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

The <link/> Tag in HTML 5

The <link/> tag can be used to identify an external resource that is to be loaded with a web page or a hypertext link to another page. Which purpose the <link> tag serves depends on the value of the rel attribute.

Some uses of the <link> tag include:

specify a favorites icon to be displayed at the beginning of the address bar
specify default and alternate style sheets
link to a feed for the page or web site
link to profile(s) of the current web page author(s)

<link rel="shortcut icon" sizes="16x16" type="image/vnd.microsoft.icon" href="/favicon.ico"></link>
<link rel="stylesheet" type="text/css" media="screen" href="/screen.css"/>
<link rel="feed" href="http://www.HTML-5.com/feeds/html5-tutorial.xml"/>

For a good example of alternate style sheets, go to the differences section at the bottom of this article on the <link/> tag and then select the "Incorrect code in red" style from the View -> Page Style menu in Firefox or from the View -> Style menu in IE.

<a> tag for links to other HTML pages

To style text as hypertext links, highlighted with underlines, that that the user can click on to navigate to other web pages, use the HTML <a> tag.

<link/> Tag Syntax

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet ...?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      ... metadata content ...
      <meta http-equiv="..." content="..."/>
      ... metadata content ...
      <title>My Title</title>
      ... metadata content ...
      <meta name="..." content="..."/>
      ... metadata content ...
   </head>
   <body>
      ... flow content ...
      <meta itemprop="..." content="..."/>
      ... flow content ...
   </body>
</html>

Rules for coding the HTML link element

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

<link/> tag as metadata content

Code any <link> tags in the <head> section of the HTML document where metadata content is expected.
Each link element consists of a standalone <link/> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
Include a rel attribute within the <link/> tag. The value of the attribute, which is enclosed in double quotes, is the type of relationship between the linked resource and the current document.
Include an href attribute within the <link/> tag with the URL of the external resource.
Include any other attributes of the <link/> tag as appropriate.
Since the link element is a void element, it should always be coded as a self-closing tag terminated with the delimiter string />.

<link/> tag for microdata properties

Code the <link> tag in the <body> section of the HTML document where phrasing content is expected.
The link element consists of a standalone <link/> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
Inside the <link> tag, code an itemprop attribute to indicate the link element represents a microdata property. The value of the attribute, which is enclosed in double quotes, is the name or URL of the microdata property.
Inside the <link/> tag, code an href attribute with the value of the microdata property in double quotes.
Include any other attributes of the <link/> tag as appropriate.
Since the <link/> tag is a void element, it should always be coded as a self-closing tag terminated with the delimiter string />.

<link/> Content Model

Contents of the <link/> Tag

Content: Empty. All properties are coded using attributes.

Since the <link/> tag is a void element, it is not allowed to have any content, even HTML comments and therefore should always be coded as a self-closing standalone tag, ending with the delimiters /> rather than just > (<link .../>).

<link/> Tag Attributes

Attributes of the <link/> tag

global attributes	In addition to the local attributes of the <link> tag below, any of the common HTML attributes can also be coded. The `itemprop` attribute is required when the <link/> tag is used where flow content or phrasing content is expected.
`href`	URL of the referenced document or any other URI reference (or IRI reference depending on the `encoding`) such as a `mailto:` link Use percent escape codes as explained in the URL Encoding Tutorial for any special characters in the URI reference. If the value of the `href` attribute resolves to an HTTP URI, it may contain any of the following components: protocol scheme, typically `http:` or else `https:` username, followed by an "@" host name or IP address port number, which defaults to 80 for the `http` scheme and 443 for the `https` scheme absolute or relative path search query, indicated by "?" fragment identifier, indicated by "#" If the protocol scheme, username, host name/IP address and port number are omitted the default is the current host - the same server as the base of the current document. If the path starts with a slash `/...`, it is an absolute path from the document root directory (AKA "web root") on the server. A relative path will be resolved relative to the base of the current document. A URI with a "#" but no fragment identifier points to the top of the document.
`hreflang`	indicates the language of the referenced document
`media`	The value of the media attribute is a media type or a comma-separated list of media types indicating an "or" relationship. Some browsers may also recognize expressions with media queries, such as `handheld and (min-width:200px)`. Continuous media types `media="braille"` `media="screeen"` `media="speech"` `media="tty"` Hybrid (continuous or paged) media types `media="all"` (default) `media="handheld"` `media="tv"` Paged media types `media="embossed"` `media="print"` `media="projection"` These media query values can also be used in the `media` attribute of the <style> tag and in the @media and @import CSS Rules.
`rel="acquaintance"` `rel="alternate"` `rel="alternate stylesheet"` `rel="apple-touch-icon"` `rel="apple-touch-startup-image"` `rel="archives"` `rel="author"` `rel="appendix"` `rel="bookmark"` `rel="chapter"` `rel="child"` `rel="co-resident"` `rel="co-worker"` `rel="colleague"` `rel="contact"` `rel="contents"` (use rel="index" instead) `rel="copyright"` `rel="crush"` `rel="date"` `rel="external"` `rel="feed"` `rel="feed alternate"` `rel="first"` `rel="friend"` `rel="glossary"` `rel="help"` `rel="icon"` `rel="index"` `rel="kin"` `rel="last"` `rel="license"` `rel="me"` `rel="met"` `rel="muse"` `rel="neighbor"` `rel="next"` `rel="nofollow"` `rel="noreferrer"` `rel="parent"` `rel="pingback"` `rel="prefetch"` `rel="prev"` `rel="search"` `rel="section"` `rel="shortcut icon"` (use rel="icon" instead) `rel="sibling"` `rel="sidebar"` `rel="spouse"` `rel="start"` (use rel="first" instead) `rel="stylesheet"` `rel="subsection"` `rel="sweetheart"` `rel="tag"` `rel="up"`	The `rel` attribute is an enumerated attribute that specifies the purpose of the link. It may contain a single keyword, or a list of rel attribute keyword values separated by spaces. `rel` attribute values for hypertext links acquaintance (from XFN rel= extensions) The person described by the document containing the link considers the person described by the referenced document to be an acquaintance. alternate The referenced document is an alternate representation of the document containing the link. This should only be used when the referenced document has content similar to the current document but published in an alternate form, such as a syndicated feed for a list of blog posts (see rel="feed alternate"). If the document has been translated into other languages, the language of the translation should be indicated in an `hreflang` attribute (not the `lang` attribute). apple-touch-icon The `apple-touch-icon` is a 57-pixel by 57-pixel PNG image used when bookmarking a web site or web page on an iPhone, iPad or iPod Touch device apple-touch-startup-image The `apple-touch-startup-image` is an image displayed while an offline web application is being launched on an iPhone, iPad or iPod Touch device. archives New The referenced document is a list of previously created versions of related documents, such as the archives of a blog. author The link references a resource about the author of the document. For search engine optimization, Google recommends using a link to the author's Google Profile or a page about the author on the same domain as the link. It could also be a link to another type of resource, such as a `mailto:` link to the email address of the author. See the rel="author" Tutorial. child (from XFN rel= extensions) The person described by the referenced document is a child of the person described by the document containing the link. co-resident (from XFN rel= extensions) The person described by the referenced document lives in the same place as the person described by the document containing the link. co-worker (from XFN rel= extensions) The person described by the referenced document works for the same company or organization as the person described by the document containing the link. colleague (from XFN rel= extensions) The person described by the referenced document works in the same field of employment as the person described by the document containing the link. contact (from XFN rel= extensions) The person described by the referenced document is someone who might be contacted by the person described by the document containing the link. crush (from XFN rel= extensions) The person described by the document containing the link has a crush on the person described by the referenced document. date (from XFN rel= extensions) The person described by the document containing the link has been dating the person described by the referenced document. feed New For feed autodiscovery, links to a syndicated feed channel for the document or the web site. Do not use or include `rel="alternate"` unless the current document and the feed are alternate forms of the same content; if the current entry is a subset of the feed, such as a single blog post, use `rel="feed"` without `"alternate"` in the attribute. feed alternate New Used when the referenced document is the syndicated feed for the current content, such as the feed for a list of blog posts in an HTML page (but not a single blog post, which would be an <entry> or <item> in the feed rather than the entire feed). first New Links to the first document in a series of articles. friend (from XFN rel= extensions) The person described by the document containing the link considers the person described by the referenced document to be a friend. help Links to a document that provides helpful information related to the content of the document containing the link (not a general help page). index Links to a table of contents or index document that includes the document containing the link as well as others in the same collection of documents. kin (from XFN rel= extensions) The person described by the document containing the link and the one described by the referenced document are members of the same extended family. last New Links to the last document in a series of articles. license New Links to a document that describes the copyright license that applies to the document(s) in which the link to the license page appears. me (from XFN rel= extensions) The person described by the referenced document is the same person as the one described by the document containing the link. They are two pages describing the same person. met (from XFN rel= extensions) The person described by the document containing the link claims to have met the person described by the referenced document. muse (from XFN rel= extensions) The person described by the referenced document provides inspiration to the person described by the document containing the link. neighbor (from XFN rel= extensions) The person described by the referenced document lives near the person represented by the document containing the link. next In a series of documents, the referenced document is the next one in sequence following the document containing the link. parent (from XFN rel= extensions) The person described by the referenced document is a parent of the person described by the document containing the link. prev In a series of documents, the referenced document is the previous one in sequence prior to the document containing the link. search New Links to a document that provides information that can be used by search engines. This could be an XML file conforming to the OpenSearch Description Document specification. sibling (from XFN rel= extensions) For a pair or siblings; the person described by the referenced document is a brother or sister of the person described by the document containing the link. sidebar New Indicates that the referenced document should be loaded into the web browser's sidebar if the link is activated by the user. spouse (from XFN rel= extensions) The person described by the referenced document is the husband or wife of the person represented by the document containing the link. sweetheart (from XFN rel= extensions) The person described by the document containing the link considers the person described by the referenced document to be their sweetheart. tag New Specifies a URI that is a "tag", which describes the subject of a page. The tag may be a URL, which leads to a web-accessible page, or just a standalone identifier. up New Links to the document at the next higher level in a tree hierarchy. The value `up` may be specified more than once: `rel="up"` points to the parent document, `rel="up up"` points to the grandparent, and so forth. `rel` attribute values for links to external resources icon New Points to a "favorites" icon, often named favicon.ico, that can be used to represent the document containing the link. A favorites icon is a color bitmapped image, usually square-shaped (ex: 16 by 16 pixels or "32x32"), that can be displayed in the browser address bar or in the favorites or bookmarks. Since the values of the `rel` attribute that are separated by spaces are distinct values, the `icon` keyword is sufficient for this purpose; using `rel="shortcut icon"` is redundant because the keyword `"shortcut"` has no meaning. pingback New Used in a link that provides the URL of the resource to handle a pingback for the document containing the link. prefetch New Indicates that the referenced document should be automatically preloaded into cache. stylesheet References a document that provides styles or templates for the document containing the link. The default for the `type` attribute is `type="text/css"`. alternate stylesheet References a user-selectable alternate style sheet. The `title` attribute is also required. The default for the `type` attribute is `type="text/css"`.
`sizes`	Used only with rel="icon" for a shortcut/favorites icon, the value provides one or more pairs of width and height values, specified as positive integers and joined by an "x" (width "by" height) or the keyword `"any"` separated by spaces.
`title`	Although `title` is one of the common attributes, which can be coded on any HTML element, it performs somewhat differently when coded on the `link` tag. The title may appear as a tool tip when the mouse hovers over the link. For `rel="alternate stylesheet"` links, the values of the title attribute identify groups of alternate style sheets that may optionally be used to view the document. In addition, the value of the `title` attribute of the `link` tag is not inherited from its ancestors. Line breaks in the `title` attribute are preserved. Therefore, the title should not be split across multiple lines.
`type`	`type="text/css"` - for a stylesheet or alternate stylesheet

<link/> Tag Examples

Examples of the <link/> tag in HTML 5

Link to favorites icons of various sizes

<link rel="icon" sizes="128x128" type="image/vnd.microsoft.icon" href="/favicon_128x128.ico"/>
<link rel="icon" sizes="64x64" type="image/vnd.microsoft.icon" href="/favicon_64x64.ico"/>
<link rel="icon" sizes="48x48" type="image/vnd.microsoft.icon" href="/favicon_48x48.ico"/>
<link rel="icon" sizes="32x32" type="image/vnd.microsoft.icon" href="/favicon_32x32.ico"/>
<link rel="icon" sizes="16x16" type="image/vnd.microsoft.icon" href="/favicon_16x16.ico"/>
<link rel="shortcut icon" sizes="16x16" type="image/vnd.microsoft.icon" href="/favicon.ico"></link>

The last link element, which points to the favicon.ico default location and is closed with an ending </link> tag, is for Internet Explorer, which treats the "shortcut icon" relationship in a non-standard way as a single value rather than a space-separated list. The slash at the beginning of the href attributes indicates that the favorites icons are in the default location at the root of the web site's document tree.

Link to default and alternate style sheets

<link rel="alternate stylesheet" type="text/css" title="Printer-Friendly" href="/print.css"/>
<link rel="stylesheet" type="text/css" media="print" href="/print.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="/screen.css"/>
<link rel="stylesheet" type="text/css" media="handheld" href="/handheld.css"/>

The slash at the beginning of the href attributes indicates that the style sheets are in the default location at the root of the web site's document tree.

The user can select an alternate stylesheet using options provided by some browsers, such as the Page Style menu in Firefox. To see this in action go to the differences section at the bottom of this article and select the "Incorrect code in red" style from the View -> Page Style menu in Firefox or the View -> Style menu in IE.

Link in a single blog post, pointing to the feed containing it

<link rel="feed" href="http://www.HTML-5.com/feeds/html5-tutorial.xml"/>

Link in index summary of blog posts, pointing to a feed with the same items

<link rel="feed alternate" href="http://www.HTML-5.com/feeds/html5-tutorial.xml"/>

The <link> tag in the feed <channel> would probably point back to the document containing this link.

Changes in HTML 5 - <link/> Tag

What's new in HTML 5

Many new possible values of the rel attribute have been added.
Additional values of the rel attribute can be added if they go through a formal approval process. The XFN values have already gone through the process and have been accepted.

In addition, the sizes attribute, used with the rel="icon" relationship, has been added.

Differences between HTML 5 and earlier versions of HTML

The following values of the rel attribute are no longer valid:

rel="appendix"
rel="chapter"
rel="contents" (use rel="index" instead)
rel="copyright"
rel="glossary"
rel="section"
rel="shortcut icon" (use rel="icon" instead)
rel="start" (use rel="first" instead)
rel="subsection"

In ployglot HTML documents the <link/> tag is coded as a self-closing tag the same as in the 2000-2010 Recommendations from the W3C HTML Working Group. Those specifications changed the ending delimiter to /> from > in older recommendations. They also defined the HTML namespace for the link element type name and the names of other HTML element types.

Valid HTML 5

HTML <link/> Tag for External Resources

Wednesday, August 13, 2014