Link types

  • Revision slug: HTML/Link_types
  • Revision title: Link types
  • Revision id: 95464
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 207 words added

Revision Content

In HTML, the relationship between two documents, being defined using an {{ HTMLElement("a") }}, {{ HTMLElement("area") }} or {{ HTMLElement("link") }} element, may be qualified via one or more of the following link types.

List of the defined Link Types and their signification in HTML 5
Link Type Description Allowed in those elements Forbidden in those elements
alternate
  • if the element is {{ HTMLElement("link") }} and the {{ htmlattrxref("rel", "link") }} attribute also contains the stylesheet type, the link defines an alternative style sheet;
  • if the {{ htmlattrxref("type","link") }} is set to application/rss+xml or application/atom+xml, the link defines a syndication feed. The first defined on the page is the default one.
  • else the link defines an alternative page:
    • either for another media, like a handheld device (if the {{ htmlattrxref("media","link") }} attribute is set),
    • or in another language (if the {{ htmlattrxref("hreflang","link") }} attribute is set),
    • or in another format, like in PDF (if the {{ htmlattrxref("type","link") }} attribute is set),
    • or a combination of those.
{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }} None.
archives Defines an hyperlink to a document archiving a link to this one. E.g. a blog entry would link to a monthly index page that way.

Note: although recognized, the singular archive is incorrect and must be avoided.
{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }} None.
author

Defines an hyperlink to a page describing the author or allowing to reach him.

Note: this may be a mailto: hyperlink, but this is not recommended on public pages as robot harvesters will quickly lead to a lot of spam sent to the address. In that case, it is better to lead to a page containing a contact formular.

Although recognized, the {{ htmlattrxref("rev", "link") }} attribute on a {{ HTMLElement("a") }}, {{ HTMLElement("area") }} or{{ HTMLElement("link") }} with a link type of made is incorrect and should be replaced by the {{ htmlattrxref("rel", "link") }} attribute with this link type.

{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }} None.
bookmark Indicates that the hyperlink is a permalink for the nearest ancestor {{ HTMLElement("article") }} element. If none, it is a permalink for the section the element is most closely associated to.

This allows to bookmarks single article in a multi-articles page, like on a montly summary blog page, or a blog aggregator.
{{ HTMLElement("a") }}, {{ HTMLElement("area") }} {{ HTMLElement("link") }}
external Indicates that the hyperlink leads to a resource outside the site of the current page, i.e. that following the link will make the user leaves the site. {{ HTMLElement("a") }}, {{ HTMLElement("area") }} {{ HTMLElement("link") }}
first

Indicates that the hyperlink leads to the first resource of the sequence the current page is in.

Note: other link types related to linking resources in the same sequence are last, prev, next.

Although recognized, the synomyns begin and start are incorrect and must be avoided.

{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }} None.
help
  • if the element is {{ HTMLElement("a") }} or {{ HTMLElement("area") }}, it indicates that the hyperlink leads to a resource giving further help about the parent of the element, and its descendants;
  • if the element is {{ HTMLElement("link") }} it indicates that the hyperlink leads to a resource giving further help about the page as a whole.
 
{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }} None.
icon

Defines a resource for representing the page in the user interface, usually an icon (auditory or visual one).

The {{ htmlattrxref("media","link") }}, {{ htmlattrxref("type","link") }} and {{ htmlattrxref("sizes","link") }} attributes allow the browser to select the most appropriate icon in its context. If several resources match, the browser will select the last one declared, in tree order. As these attributes are merely hints, and the resources may be non-appropriate upon further inspection, the browser will then select another one, if appropriate.

Note: Apple's iOS do not use this link type, nor the {{ htmlattrxref("sizes","link") }} attribute, like others mobile browsers do, to select a webpage icon for Web Clip or a start-up placeholder. Instead it uses the non-standard apple-touch-icon and apple-touch-startup-image respectively.

The shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore.

{{ HTMLElement("link") }} {{ HTMLElement("a") }}, {{ HTMLElement("area") }}
index Indicates that the page is part of a hierarchical structure and that the hyperlink leads to the top level resource of that structure.

If one or several up link types are also present, the number of these up indicates the depth of the current page in the hierarchy.
{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }} None.
last
Indicates that the hyperlink leads to the last resource of the sequence the current page is in.

Note: other link types related to linking resources in the same sequence are first, prev, next.

Although recognized, the synomyn end is incorrect and must be avoided.
{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }} None.
license
Indicates that the hyperlink leads to a document describing the licensing information. If not inside the {{ HTMLElement("head") }} element, the standard doesn't desambiguation between an hyperlink applying to specific part of the document or to the document in its whole. Only the data the page can indicate it.

Note: Although recognized, the synonym copyright is incorrect and must be avoided.
{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }} None.
next
Indicates that the hyperlink leads to the next resource of the sequence the current page is in.

Note: other link types related to linking resources in the same sequence are first, prev, last.
{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }} None.
nofollow
Indicates that the linked document is not endorsed by the author of this one, for example if it has no control over it, if it is a bad example or if there is commercial relationship between the two (sold link). This link type may be used by some search engines that use popularity ranking techniques. {{ HTMLElement("a") }}, {{ HTMLElement("area") }} {{ HTMLElement("link") }}
noreferrer


Prevents the browser, when navigating to another page, to send this page name, or any other value, as referrer via the Referer: HTTP header. {{ unimplemented_inline("530396") }} {{ HTMLElement("a") }}, {{ HTMLElement("area") }} {{ HTMLElement("link") }}
pingback
Defines an external resource URI to call if one make a comment or a citation about the webpage. The protocol used to make such a call is defined in the Pingback 1.0 specification.

Note: if the X-Pingback HTTP header is also present, this header has precedence over the {{ HTMLElement("link") }} elelement with this link type
{{ HTMLElement("link") }} {{ HTMLElement("a") }}, {{ HTMLElement("area") }}
prefetch
Hints the browser to fetch in advance the linked resource, as it will likely be requested by the user.

Note: the Link Prefetch FAQ has details on which links can be prefetched and on alternative method
{{ HTMLElement("a") }}{{ unimplemented_inline() }}, {{ HTMLElement("area") }}{{ unimplemented_inline() }}, {{ HTMLElement("link") }} None.
prev
Indicates that the hyperlink leads to the precedent resource of the sequence the current page is in.

Note: other link types related to linking resources in the same sequence are first, last, next.

Although recognized, the synomyn previous is incorrect and must be avoided.
{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }} None.
search

Indicates that the hyperlink reference a document whose interface is specially designing for searching in this document, or site, and its resources.

If the {{ htmlattrxref("type","link") }} attribute is set to application/opensearchdescription+xml the research is an OpenSearch plugin that can be easily added to the interface of some browsers like Firefox or Internet Explorer.

{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }} None.
stylesheet

{{ HTMLElement("a") }}, {{ HTMLElement("area") }} {{ HTMLElement("link") }}
sidebar
Indicates that the hyperlink leads to a resource that would be better suited for a secondary browsing context, like a sidebar. Browsers, like Firefox, that don't have such a context will ignore this keyword. {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }} None.
tag
Indicates that the hyperlink reference a document describing a tag that applies to this document.

Note: this link type should not be set on links member of a tags cloud as these one does not apply to a single document but to a set of pages.
{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }} None.
up Indicates that the page is part of a hierarchical structure and that the hyperlink leads to the higher level resource of that structure.

The number of up link types indicates the depth difference between the current page and the linked resource.
{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }} None.

Revision Source

<p>In HTML, the relationship between two documents, being defined using an {{ HTMLElement("a") }}, {{ HTMLElement("area") }} or {{ HTMLElement("link") }} element, may be qualified via one or more of the following link types.</p>
<table class="standard-table" style="width: 100%;"> <caption>List of the defined Link Types and their signification in HTML 5</caption> <thead> <tr> <th scope="col">Link Type</th> <th scope="col">Description</th> <th scope="col">Allowed in those elements</th> <th scope="col">Forbidden in those elements</th> </tr> </thead> <tbody> <tr> <td><span style="font-family: Courier New;">alternate<br> </span></td> <td> <ul> <li>if the element is {{ HTMLElement("link") }} and the {{ htmlattrxref("rel", "link") }} attribute also contains the <span style="font-family: Courier New;">stylesheet</span> type, the link defines an <a href="/en/Alternative_style_sheets" title="en/Alternative style sheets">alternative style sheet</a>;</li> <li>if the {{ htmlattrxref("type","link") }} is set to <span style="font-family: Courier New;">application/rss+xml</span> or <span style="font-family: Courier New;">application/atom+xml</span>, the link defines a <a href="/en/RSS/Getting_Started/Syndicating" title="en/RSS/Getting Started/Syndicating">syndication feed</a>. The first defined on the page is the default one.</li> <li>else the link defines an alternative page: <ul> <li>either for another media, like a handheld device (if the {{ htmlattrxref("media","link") }} attribute is set),</li> <li>or in another language (if the {{ htmlattrxref("hreflang","link") }} attribute is set),</li> <li>or in another format, like in PDF (if the {{ htmlattrxref("type","link") }} attribute is set),</li> <li>or a combination of those.</li> </ul> </li> </ul> </td> <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> <td><em>None</em>.</td> </tr> <tr> <td><span style="font-family: Courier New;">archives</span></td> <td>Defines an hyperlink to a document archiving a link to this one. E.g. a blog entry would link to a monthly index page that way.<br> <br> <strong>Note:</strong> although recognized, the singular <span style="font-family: Courier New;">archive</span> is incorrect and must be avoided.</td> <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> <td><em>None.</em></td> </tr> <tr> <td><span style="font-family: Courier New;">author<br> </span></td> <td> <p>Defines an hyperlink to a page describing the author or allowing to reach him.<br> <br> <strong>Note:</strong> this may be a <span style="font-family: Courier New;">mailto:</span> hyperlink, but this is not recommended on public pages as robot harvesters will quickly lead to a lot of spam sent to the address. In that case, it is better to lead to a page containing a contact formular.</p> <p>Although recognized, the {{ htmlattrxref("rev", "link") }} attribute on a {{ HTMLElement("a") }}, {{ HTMLElement("area") }} or{{ HTMLElement("link") }} with a link type of <span style="font-family: Courier New;">made</span> is incorrect and should be replaced by the {{ htmlattrxref("rel", "link") }} attribute with this link type.</p> </td> <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> <td><em>None.</em></td> </tr> <tr> <td><span style="font-family: Courier New;">bookmark</span></td> <td>Indicates that the hyperlink is a <a href="/en/Permalink" title="en/Permalink">permalink</a> for the nearest ancestor {{ HTMLElement("article") }} element. If none, it is a permalink for the <a href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">section</a> the element is most closely associated to.<br> <br> This allows to bookmarks single article in a multi-articles page, like on a montly summary blog page, or a blog aggregator.</td> <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> <td>{{ HTMLElement("link") }}</td> </tr> <tr> <td><span style="font-family: Courier New;">external</span></td> <td>Indicates that the hyperlink leads to a resource outside the site of the current page, i.e. that following the link will make the user leaves the site.</td> <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> <td>{{ HTMLElement("link") }}</td> </tr> <tr> <td><span style="font-family: Courier New;">first</span></td> <td> <p>Indicates that the hyperlink leads to the first resource of the <em>sequence</em> the current page is in.<br> <br> <strong>Note:</strong> other link types related to linking resources in the same sequence are <span style="font-family: Courier New;">last</span>, <span style="font-family: Courier New;">prev</span>, <span style="font-family: Courier New;">next</span>.<br> <br> Although recognized, the synomyns <span style="font-family: Courier New;">begin</span> and <span style="font-family: Courier New;">start</span> are incorrect and must be avoided.</p> </td> <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> <td><em>None.</em></td> </tr> <tr> <td><span style="font-family: Courier New;">help</span></td> <td> <ul> <li>if the element is {{ HTMLElement("a") }} or {{ HTMLElement("area") }}, it indicates that the hyperlink leads to a resource giving further help about the parent of the element, and its descendants;</li> <li>if the element is {{ HTMLElement("link") }} it indicates that the hyperlink leads to a resource giving further help about the page as a whole.</li> </ul>  </td> <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> <td><em>None.</em></td> </tr> <tr> <td><span style="font-family: Courier New;">icon</span></td> <td> <p>Defines a resource for representing the page in the user interface, usually an icon (auditory or visual one).</p> <p>The {{ htmlattrxref("media","link") }}, {{ htmlattrxref("type","link") }} and {{ htmlattrxref("sizes","link") }} attributes allow the browser to select the most appropriate icon in its context. If several resources match, the browser will select the last one declared, in tree order. As these attributes are merely hints, and the resources may be non-appropriate upon further inspection, the browser will then select another one, if appropriate.</p> <p><strong>Note:</strong> Apple's iOS do not use this link type, nor the {{ htmlattrxref("sizes","link") }} attribute, like others mobile browsers do, to select a webpage icon for Web Clip or a start-up placeholder. Instead it uses the non-standard <a class=" external" href="http://edr.euro.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4" title="http://edr.euro.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4"><span style="font-family: Courier New;">apple-touch-icon</span></a> and <a class=" external" href="http://edr.euro.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6" title="http://edr.euro.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6"><span style="font-family: Courier New;">apple-touch-startup-image</span></a> respectively.<br> <br> The <span style="font-family: Courier New;">shortcut</span> link type is often seen before <span style="font-family: Courier New;">icon</span>, but this link type is non-conforming, ignored and <strong>web authors must not use it anymore</strong>.</p> </td> <td>{{ HTMLElement("link") }}</td> <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> </tr> <tr> <td><span style="font-family: Courier New;">index</span></td> <td>Indicates that the page is part of a <em>hierarchical</em> structure and that the hyperlink leads to the top level resource of that structure.<br> <br> If one or several <span style="font-family: Courier New;">up</span> link types are also present, the number of these <span style="font-family: Courier New;">up</span> indicates the depth of the current page in the hierarchy.</td> <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> <td><em>None.</em></td> </tr> <tr> <td><span style="font-family: Courier New;">last<br> </span></td> <td>Indicates that the hyperlink leads to the <em>last</em> resource of the <em>sequence</em> the current page is in.<br> <br> <strong>Note:</strong> other link types related to linking resources in the same sequence are <span style="font-family: Courier New;">first</span>, <span style="font-family: Courier New;">prev</span>, <span style="font-family: Courier New;">next</span>.<br> <br> Although recognized, the synomyn <span style="font-family: Courier New;">end</span> is incorrect and must be avoided.</td> <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> <td><em>None.</em></td> </tr> <tr> <td><span style="font-family: Courier New;">license<br> </span></td> <td>Indicates that the hyperlink leads to a document describing the licensing information. If not inside the {{ HTMLElement("head") }} element, the standard doesn't desambiguation between an hyperlink applying to specific part of the document or to the document in its whole. Only the data the page can indicate it.<br> <br> <strong>Note: </strong>Although recognized, the synonym <span style="font-family: Courier New;">copyright</span> is incorrect and must be avoided.</td> <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> <td><em>None.</em></td> </tr> <tr> <td><span style="font-family: Courier New;">next<br> </span></td> <td>Indicates that the hyperlink leads to the <em>next</em> resource of the <em>sequence</em> the current page is in.<br> <br> <strong>Note:</strong> other link types related to linking resources in the same sequence are <span style="font-family: Courier New;">first</span>, <span style="font-family: Courier New;">prev</span>, <span style="font-family: Courier New;">last</span>.</td> <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> <td><em>None.</em></td> </tr> <tr> <td><span style="font-family: Courier New;">nofollow<br> </span></td> <td>Indicates that the linked document is not endorsed by the author of this one, for example if it has no control over it, if it is a bad example or if there is commercial relationship between the two (sold link). This link type may be used by some search engines that use popularity ranking techniques.</td> <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> <td>{{ HTMLElement("link") }}</td> </tr> <tr> <td><span style="font-family: Courier New;">noreferrer<br> <br> <br> </span></td> <td>Prevents the browser, when navigating to another page, to send this page name, or any other value, as referrer via the <span style="font-family: Courier New;">Referer:</span> HTTP header. <span style="font-family: Verdana;">{{ unimplemented_inline("530396") }}</span></td> <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> <td>{{ HTMLElement("link") }}</td> </tr> <tr> <td><span style="font-family: Courier New;">pingback<br> </span></td> <td>Defines an external resource URI to call if one make a comment or a citation about the webpage. The protocol used to make such a call is defined in the <a class=" external" href="http://www.hixie.ch/specs/pingback/pingback" title="http://www.hixie.ch/specs/pingback/pingback">Pingback 1.0</a> specification.<br> <br> <strong>Note:</strong> if the X-Pingback HTTP header is also present, this header has precedence over the {{ HTMLElement("link") }} elelement with this link type</td> <td>{{ HTMLElement("link") }}</td> <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> </tr> <tr> <td><span style="font-family: Courier New;">prefetch<br> </span></td> <td>Hints the browser to fetch in advance the linked resource, as it will likely be requested by the user. <br> <br> <strong>Note:</strong> the <a href="/en/Link_prefetching_FAQ" title="en/Link prefetching FAQ">Link Prefetch FAQ</a> has details on which links can be prefetched and on alternative method</td> <td>{{ HTMLElement("a") }}{{ unimplemented_inline() }}, {{ HTMLElement("area") }}{{ unimplemented_inline() }}, {{ HTMLElement("link") }}</td> <td><em>None.</em></td> </tr> <tr> <td><span style="font-family: Courier New;">prev<br> </span></td> <td>Indicates that the hyperlink leads to the <em>precedent</em> resource of the <em>sequence</em> the current page is in.<br> <br> <strong>Note:</strong> other link types related to linking resources in the same sequence are <span style="font-family: Courier New;">first</span>, <span style="font-family: Courier New;">last</span>, <span style="font-family: Courier New;">next</span>.<br> <br> Although recognized, the synomyn <span style="font-family: Courier New;">previous</span> is incorrect and must be avoided.</td> <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> <td><em>None.</em></td> </tr> <tr> <td><span style="font-family: Courier New;">search<br> </span></td> <td> <p>Indicates that the hyperlink reference a document whose interface is specially designing for searching in this document, or site, and its resources.</p> <p>If the {{ htmlattrxref("type","link") }} attribute is set to <span style="font-family: Courier New;">application/opensearchdescription+xml </span>the research is an <a href="/en/Creating_OpenSearch_plugins_for_Firefox" title="en/Creating OpenSearch plugins for Firefox">OpenSearch plugin</a> that can be easily added to the interface of some browsers like Firefox or Internet Explorer.</p> </td> <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> <td><em>None.</em></td> </tr> <tr> <td><span style="font-family: Courier New;">stylesheet<br> </span></td> <td><span style="font-family: Courier New;"><br> </span></td> <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> <td>{{ HTMLElement("link") }}</td> </tr> <tr> <td><span style="font-family: Courier New;">sidebar<br> </span></td> <td>Indicates that the hyperlink leads to a resource that would be better suited for a secondary browsing context, like a <em>sidebar</em>. Browsers, like Firefox, that don't have such a context will ignore this keyword.</td> <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> <td><em>None.</em></td> </tr> <tr> <td><span style="font-family: Courier New;">tag<br> </span></td> <td>Indicates that the hyperlink reference a document describing a <em>tag</em> that applies to this document.<br> <br> <strong>Note:</strong> this link type should not be set on links member of a <a href="/en/Tags_cloud" title="en/Tags cloud">tags cloud</a> as these one does not apply to a single document but to a set of pages.</td> <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> <td><em>None.</em></td> </tr> <tr> <td><span style="font-family: Courier New;">up</span></td> <td>Indicates that the page is part of a <em>hierarchical</em> structure and that the hyperlink leads to the higher level resource of that structure.<br> <br> The number of <span style="font-family: Courier New;">up</span> link types indicates the depth difference between the current page and the linked resource.</td> <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> <td><em>None.</em></td> </tr> </tbody>
</table>
Revert to this revision