HTML: The Link Tag

0
739
HTML link tag

The <link> tag is used to reference other resources used in the HTML document.

Link Types

There are many different types of resources a document can reference. This is done using keywords specified in the relationship (rel) attribute. These keywords must be used within the <head> of a document as metadata:

  • alternate
  • author
  • help
  • icon
  • license
  • next
  • prefetch
  • prev
  • search
  • stylesheet

The <link> tag can appear in the <head> and <body> tags, though they are most commonly found in the <head> to serve as metadata. A <link> tag can reference the traditional browser hyperlink used for navigation or add to the document via external resources like CSS, and Javascript.

Alternate

Used to give an alternate representation of the HTML document.

In the example below, we represent two alternative language documents for this English HTML document – French and Spanish. The hreflang attribute is used to tell the user agent the ISO 639-1 country code available.

<head>
  <link rel="alternate" hreflang="fr" type="text/html" href="http://www.site.com/lang/fr/html/this-doc.html"/>
  <link rel="alternate" hreflang="es" type="text/html" href="http://www.site.com/lang/es/html/this-doc.html"/>
</head>

Another example of offering three different Microsoft Word documents for English, French, and Spanish:

<head>
  <link rel="alternate" hreflang="en" type="application/msword" href="http://www.site.com/lang/en/msword/this-doc.doc"/>
  <link rel="alternate" hreflang="fr" type="application/msword" href="http://www.site.com/lang/fr/msword/this-doc.doc"/>
  <link rel="alternate" hreflang="es" type="application/msword" href="http://www.site.com/lang/es/msword/this-doc.doc"/>
</head>

Basically, any translation of one document type to a MIME type can be used. The user agent, however, must be able to support that type to render correctly.

Author

A metadata reference for author information. Typically, this references a HTML page for an author. Only one author can be specified per link tag.

<head>
  <link rel="author" href="http://www.site.com/the-author-bio"/>
</head>

If you have many authors associated with a HTML page, place multiple link tags in it.

<head>
  <link rel="author" href="http://www.site1.com/the-author-bio"/>
  <link rel="author" href="http://www.site2.com/the-author-bio"/>
  <link rel="author" href="http://www.site3.com/the-author-bio"/>
</head>

You may also want to add an author metatag as well for being more complete.

<head>
  <meta name="author" content="Article by Joe Smith, Harry Paul, Samantha Lang">
</head>

Help

This is a neat idea that comes in handy to offer more assistance to visitors to the page. Whenever you visit a HTML page, you can specify a help page to accompany it. A user agent that supports this could have two views – a primary tab to render the document and another tab that shows the help page for the document.

<head>
  <link rel="help" href="http://www.site.com/category/article-title/help.html"/>
</head>

Icon

Represents the icon of the page. There can be many icons representing the page. The last one that is the most appropriate is used.

<head>
  <link rel="icon" type="image/png" href="http://www.site.com/icons/favicon.png"/>
  <link rel="icon" type="image/jpeg" href="http://www.site.com/icons/apple.jpg"/>
  <link rel="icon" type="image/gif" href="http://www.site.com/icons/msoft.gif" sizes="64x64"/>
  <link rel="icon" type="image/png" href="http://www.site.com/icons/android.png" sizes="64x64"/>
</head>

License

This is the copyright license terms for the document. You can use a site wide or a specific license pertaining to the document.

<head>
  <link rel="license" type="text/html" href="http://www.site.com/legal/sitewide.html"/>
  <link rel="license" type="text/html" href="http://www.site.com/legal/item-100.html"/>
</head>

Next

Specifies the next page in a HTML document. Very helpful for helping search engines know what the next page is.

<head>
  <link rel="next" href="http://www.site.com/article-title/2"/>
</head>

Prefetch

Gives a hint to the user agent that it should prefetch and cache a resource to speed up downloads and processing. This is done when you, the developer, know that you are going to use resources that are definitely going to be used in the page.

<head>
  <link rel="prefetch" href="http://www.site.com/fonts/myfonts"/>
  <link rel="prefetch" href="http://www.site.com/images/mylogo.jpg"/>
  <link rel="prefetch" href="http://www.site.com/article-title/1"/>
  <link rel="prefetch" href="http://www.site.com/article-title/3"/>
</head>

Prev

Specifies the previous page in a HTML document. Most useful for page navigation.

<head>
  <link rel="prev" href="http://www.site.com/article-title/1"/>
</head>

Search

Specifies a document that is used for searching the existing document. Typically this will be a page that has a form in it that will look for keywords in the document. It is recommend to use the OpenSearch specification to implement.

<head>
  <link rel="search" href="http://www.site.com/search/search.html"/>
</head>

Stylesheet

Use to import a stylesheet used to render the document. This is done through Cascading Style Sheets (CSS).

<head>
  <link rel="stylesheet" type="text/css" href="http://www.site.com/css/styles.css"/>
</head>

Of Interest