Working With Document Alternates

There are circumstances in which we may want to provide our website users alternate versions of the same content. These cases usually fall into one of the following categories -

• Providing themed versions of a website with alternate stylesheets
• Providing versions of the website in different languages
• Serving a syndication feed for use by rss readers
• Providing the content of the page in alternate media formats

In most of these cases, the alternate value of link tag is used.

<link rel="alternate">

The alternate value tells the user agent or web crawler that the linked page or document has essentially the same content as the main page, but with some peripheral difference.

The alternate value should be distinguished from the canonical value, which specifies which page is the "preferred" version. This is relevant when you may have the exact same content on more than one page.

Alternate Stylesheets #

One way the alternate link tag can be used is to provide alternate stylesheets for a page. This allows us to, for example, provide a light or dark alternative theme for the website.

<link rel="stylesheet" href="main.css" title="Light Theme">
<link rel="alternate stylesheet" href="dark.css" title="Dark Theme">

Pairing the alternate value with the stylesheet value is not like just adding another stylesheet. The stylesheet marked as alternate is not actually loaded until it is called by some external factor. For example, in Firefox, users are given the option to choose a stylesheet in the settings (View > Page Style). In other browsers, this option is non existent.

Therefore, to make the alternate stylesheet useful to users, we have to use JavaScript to enable them to switch between the stylesheets. Paul Sowden created a javascript library to help you do this. It's called stylesheetswitcher.js, and allows you to create something like this -

By just writing this -

<button onclick="setActiveStyleSheet('Light Theme')">Light Theme</button>
<button onclick="setActiveStyleSheet('Dark Theme')">Dark Theme</button>

Although this is not something that is very widely used, especially for regular websites, it does make for an interesting design if used properly.

Alternate Stylesheets dependent on Media #

If we want to provide different stylesheets dependent on the media type or screen size, the rel="alternate" value should not be used. As mentioned above, this will cause the alternate stylesheet to not be loaded at all.

Instead, we only need to define the media attribute, and let the browser determine which stylesheet should be used.

<link rel="stylesheet" href="screen.css" media="screen">

<!-- For smaller devices -->
<link rel="stylesheet" href="screen-small.css" media="only screen and (max-device-width: 480px)">

<!-- For print -->
<link rel="stylesheet" href="print.css" media="print">

This way, all stylesheets are loaded, but which stylesheet is active will be dependent on the relevant media.

Alternate Languages #

It is becoming more common to have several versions of a site translated in different languages. Even with tools like Google translate, it is more accurate to provide a self-translated version. So, for example, you might have https://example.com as the main version of the site in your native language and https://example.com/fr for a version of the same website translated in French.

To specify what different language versions of a site are available, we use the hreflang attribute paired with rel="alternate".

<link rel="alternate" href="https://example.com/fr" hreflang="fr" />

The hreflang attribute must be set to a valid BCP 47 language tag, optionally suffixed with a region code and/or script variation. For example -

hreflang	Description
de	German language, no specified region
de-es	German language, users in Spain
de-fr-latn	German language, users in France, Latin script
fr-be	French language, users in Belgium
zh-Hant	Chinese language, traditional script
zh-Hans	Chinese language, simplified script
en-gb	English language, users in Great Britain
x-default	Used if there are multiple languages on the same page

The purpose of the tag is not necessarily to tell the browser what language the page is in. In fact, browsers are not supposed to consider it authoritative. What it is useful for is in search results. Google uses it to serve the correct regional URL in search results based on where the user is searching from.

However, you should be careful not to go to specific. The W3C recomends that the script subtags should only be used to distinguish varieties of a language that would normally vary.

Syndication Feed #

The rss/atom feed is essentially the same content of the site written in a format that can be read by syndication readers. Therefore, the alternate value is used to link to the document.

<!-- RSS Feed -->
<link rel="alternate" type="application/rss+xml"  href="path/to/rss">

<!-- Atom Feed -->
<link rel="alternate" type="application/atom+xml"  href="path/to/data.xml">

Alternate Format #

If a page on the site is also provided in another format, the alternate link tag can be used. The format of the document, in a valid MIME type, must also be provided. For example, if the content of a page is also available in PDF, we could write -

<link rel="alternate" type="application/pdf"  href="path/to/application.pdf" title="PDF Version">