1. Technology

HTML Link Tag

Link Defines More than Just External Style Sheets


The LINK element is most often used to connect external style sheets to a web page, but this element has several other uses. It is a tag that is intended to convey relationships between the current page and other internet documents. The LINK element is found only in the HEAD of your HTML document, and is a singleton tag (in XHTML, it is closed with a slash at the end of the tag: <link />).

Links and External Style Sheets

The most commonly used type of link is the stylesheet link. This looks like:

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

The first attribute href defines the URL where the style sheet is located. Then the rel attribute indicates that the relationship of this link is a style sheet. Finally the type attribute tells the user agent what MIME type the linked document will be. For style sheets this should always be "text/css". If you are using standard CSS, this attribute is not required in HTML5 documents because the browsers assume that is the stylesheet type.

The Rel and Rev Attributes

The rel and rev attributes are where you define the type of link you're including in your document. Rel and rev act as complementary attributes, rel defining related links that are forward while rev defines related links that are reverse from the current page. This is most often used in a series of pages, where you would define the rel="next" and rev="prev" links on the pages. Most links are considered forward or rel links.

In HTML5 the rev attribute was made obsolete because it was rarely used, and often when it was used it was used incorrectly. Instead, all link types are now defined using the rel attribute and the complementary actions are defined using complementary link types. For example, in a list of documents, the rel=prev and rel=next links are defined simply with the next and prev keywords.

HTML5 Link Types

There are many different types of links you can include in your documents, and you can include them on both LINK, A, and AREA elements (as indicated in the table below).

Link Type Explanation A and AREA LINK
alternate Substitute versions of the page. These can be in other languages (such as French or Spanish) or other media types (such as PDF or PostScript) or mobile versions of the page or site.
author A link to the current document's author.
bookmark The permalink of the nearest ancestor to the current page.  
cannonical A link to the authoritative source of the page contents or site. (This is a Google-specific type, and may not be supported by other search engines.)
external A link that is not a part of the current site.  
help A link to context-sensitive help.
icon A link to an icon or favicon.  
license A link to the copyright license of the document.
next The next document in a series.
nofollow The site linked to is not endorsed by the contents author—usually advertising.  
noreferrer The user agent should not send referer information to this link.  
pingback The address of a pingback server for the current document.  
prefetch A document that should be downloaded ahead of time.
prev The previous document in a series.
search A link to a search page for the site or related pages.
sidebar A document that should be displayed in the browser sidebar.
stylesheet A link to a style sheet for the document.  
tag A link to the address of a tag that applies to the current document.

Define Alternate Pages with the Link Tag

Alternate pages are a useful way to provide more details for your customers and for search engines. You might define alternate natural language pages or alternate pages in a different file format. You can do both, in fact.

To define a link to a Spanish version of the current page, you would write:

<link href="spanish.html" lang="sp" hreflang="sp" rel="alternate" type="text/html" title="The page in Spanish" />

To define a link to a PDF version of the current page, you would write:

<link href="page.pdf" rel="alternate" type="application/pdf" title="A PDF version of the page" media="print" />

Another great use of the alternate type is to define alternate style sheets for specific uses. This allows readers using user agents like Firefox to choose between different style sheets. The most common alternate style sheet is the zoom layout style sheet. You would define an alternate style sheet with two types (separated by spaces) in the rel attribute:

<link href="zoom.css" rel="alternate stylesheet" type="text/css" title="Zoom style sheet" />

Be sure to title your alternate style sheet with the title attribute so that the browsers can display them effectively.

©2014 About.com. All rights reserved.