The link tag is most often used to connect external style sheets to a Web page, but this tag has several other uses. It is a tag that is intended to convey relationships between the current page and other Internet documents. The link tag 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".
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.
There are many different types of links you can include in your documents:
- stylesheet - the most commonly used link type, this refers to an external style sheet
- 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)
- start - the first document in a series of documents, of which the current page is a member
- next - the next document in a series, following the current page
- prev - the previous document in a series, preceding the current page
- contents - refers to a document that acts as a table of contents for the pages
- toc - an alternate reference to a table of contents, not all browsers support this type
- index - refers to a document that acts as an index for the current page
- glossary - refers to a document that provides a glossary of terms related to the current page
- copyright - a copyright statement for the current page
- chapter - refers to a document serving as a chapter in a collection of documents
- section - refers to a document serving as a section in a collection of documents
- subsection - refers to a document serving as a subsection in a collection of documents
- appendix - refers to a document serving as an appendix in a collection of documents
- help - refers to a document that provides help about the current document, including more information, other sources, and so on
- bookmark - refers to a bookmark or key entry point within an extended 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.
