4.12 Links — HTML5 (original) (raw)

4.11.5 Commands –Table of contents –5 Loading Web pages

4.12 Links

4.12.1 Introduction

Links are a conceptual construct, created by [a](text-level-semantics.html#the-a-element),[area](the-map-element.html#the-area-element), and [link](semantics.html#the-link-element) elements, that represent a connection between two resources, one of which is the current [Document](infrastructure.html#document). There are two kinds of links in HTML:

Links to external resources

These are links to resources that are to be used to augment the current document, generally automatically processed by the user agent.

Hyperlinks

These are links to other resources that are generally exposed to the user by the user agent so that the user can cause the user agent to navigate to those resources, e.g. to visit them in a browser or download them.

For [link](semantics.html#the-link-element) elements with an [href](semantics.html#attr-link-href) attribute and a [rel](semantics.html#attr-link-rel) attribute, links must be created for the keywords of the [rel](semantics.html#attr-link-rel) attribute, as defined for those keywords in the link types section.

Similarly, for [a](text-level-semantics.html#the-a-element) and [area](the-map-element.html#the-area-element) elements with an [href](#attr-hyperlink-href) attribute and a[rel](#attr-hyperlink-rel) attribute, links must be created for the keywords of the [rel](#attr-hyperlink-rel) attribute as defined for those keywords in the link types section. Unlike[link](semantics.html#the-link-element) elements, however, [a](text-level-semantics.html#the-a-element) and[area](the-map-element.html#the-area-element) element with an [href](#attr-hyperlink-href) attribute that either do not have a [rel](#attr-hyperlink-rel) attribute, or whose [rel](#attr-hyperlink-rel) attribute has no keywords that are defined as specifying hyperlinks, must also create ahyperlink. This implied hyperlink has no special meaning (it has no link type) beyond linking the element's document to the resource given by the element's [href](#attr-hyperlink-href) attribute.

A hyperlink can have one or more hyperlink annotations that modify the processing semantics of that hyperlink.

4.12.2 Links created by `[a](text-level-semantics.html#the-a-element)` and `[area](the-map-element.html#the-area-element)` elements

The href attribute on [a](text-level-semantics.html#the-a-element) and [area](the-map-element.html#the-area-element) elements must have a value that is a valid URL potentially surrounded by spaces.

The [href](#attr-hyperlink-href) attribute on [a](text-level-semantics.html#the-a-element) and [area](the-map-element.html#the-area-element) elements is not required; when those elements do not have [href](#attr-hyperlink-href) attributes they do not create hyperlinks.

The target attribute, if present, must be a valid browsing context name or keyword. It gives the name of the browsing context that will be used. User agents use this name when following hyperlinks.

The rel attribute on [a](text-level-semantics.html#the-a-element) and [area](the-map-element.html#the-area-element) elements controls what kinds of links the elements create. The attribue's value must be a set of space-separated tokens. The allowed keywords and their meanings are defined below.

The [rel](#attr-hyperlink-rel) attribute has no default value. If the attribute is omitted or if none of the values in the attribute are recognized by the user agent, then the document has no particular relationship with the destination resource other than there being a hyperlink between the two.

The media attribute describes for which media the target document was designed. It is purely advisory. The value must be a valid media query. The default, if the [media](#attr-hyperlink-media) attribute is omitted, is "all".

The hreflang attribute on [a](text-level-semantics.html#the-a-element) and [area](the-map-element.html#the-area-element) elements that create hyperlinks, if present, gives the language of the linked resource. It is purely advisory. The value must be a valid BCP 47 language tag. [BCP47] User agents must not consider this attribute authoritative — upon fetching the resource, user agents must use only language information associated with the resource to determine its language, not metadata included in the link to the resource.

The type attribute, if present, gives the MIME type of the linked resource. It is purely advisory. The value must be avalid MIME type. User agents must not consider the [type](#attr-hyperlink-type) attribute authoritative — upon fetching the resource, user agents must not use metadata included in the link to the resource to determine its type.

4.12.3 Following hyperlinks

When a user follows a hyperlink created by an element, the user agent must resolve theURL given by the [href](#attr-hyperlink-href) attribute of that element, relative to that element, and if that is successful, mustnavigate a browsing context to the resulting absolute URL. In the case of server-side image maps, that absolute URL must have its hyperlink suffix appended to it before the navigation is started.

If resolving theURL fails, the user agent may report the error to the user in a user-agent-specific manner, maynavigate to an error page to report the error, or may ignore the error and do nothing.

If the user indicated a specific browsing context when following the hyperlink, or if the user agent is configured to follow hyperlinks by navigating a particular browsing context, then that must be the browsing context that is navigated.

Otherwise, if the element is an [a](text-level-semantics.html#the-a-element) or[area](the-map-element.html#the-area-element) element that has a [target](#attr-hyperlink-target) attribute, then thebrowsing context that is navigated must be chosen by applying the rules for choosing a browsing context given a browsing context name, using the value of the [target](#attr-hyperlink-target) attribute as the browsing context name. If these rules result in the creation of a new browsing context, it must be navigated withreplacement enabled.

Otherwise, if the hyperlink is a sidebar hyperlink and the user agent implements a feature that can be considered a secondary browsing context, such a secondary browsing context may be selected as the browsing context to be navigated.

Otherwise, if the element is an [a](text-level-semantics.html#the-a-element) or[area](the-map-element.html#the-area-element) element with no [target](#attr-hyperlink-target) attribute, but the[Document](infrastructure.html#document) contains a [base](semantics.html#the-base-element) element with a[target](semantics.html#attr-base-target) attribute, then the browsing context that is navigated must be chosen by applyingthe rules for choosing a browsing context given a browsing context name, using the value of the [target](semantics.html#attr-base-target) attribute of the first such[base](semantics.html#the-base-element) element as the browsing context name. If these rules result in the creation of a new browsing context, it must be navigated with replacement enabled.

Otherwise, the browsing context that must be navigated is the same browsing context as the one which the element itself is in.

The navigation must be done with the browsing context that contains the [Document](infrastructure.html#document) object with which the element in question is associated as the source browsing context.

4.12.4 Link types

The following table summarizes the link types that are defined by this specification. This table is non-normative; the actual definitions for the link types are given in the next few sections.

In this section, the term referenced document refers to the resource identified by the element representing the link, and the term current document refers to the resource within which the element representing the link finds itself.

To determine which link types apply to a [link](semantics.html#the-link-element),[a](text-level-semantics.html#the-a-element), or [area](the-map-element.html#the-area-element) element, the element's rel attribute must be split on spaces. The resulting tokens are the link types that apply to that element.

Except where otherwise specified, a keyword must not be specified more than once per [rel](#attr-hyperlink-rel) attribute.

The link types that contain no U+003A COLON characters (:), including all those defined in this specification, are ASCII case-insensitive values, and must be compared as such.

Thus, rel="next" is the same as rel="NEXT".

Link type	Effect on...	Brief description
link	a and area
alternate	Hyperlink	Hyperlink	Gives alternate representations of the current document.
author	Hyperlink	Hyperlink	Gives a link to the current document's author.
bookmark	not allowed	Hyperlink	Gives the permalink for the nearest ancestor section.
external	not allowed	Hyperlink	Indicates that the referenced document is not part of the same site as the current document.
help	Hyperlink	Hyperlink	Provides a link to context-sensitive help.
icon	External Resource	not allowed	Imports an icon to represent the current document.
license	Hyperlink	Hyperlink	Indicates that the main content of the current document is covered by the copyright license described by the referenced document.
next	Hyperlink	Hyperlink	Indicates that the current document is a part of a series, and that the next document in the series is the referenced document.
nofollow	not allowed	Annotation	Indicates that the current document's original author or publisher does not endorse the referenced document.
noreferrer	not allowed	Annotation	Requires that the user agent not send an HTTP Referer (sic) header if the user follows the hyperlink.
pingback	External Resource	not allowed	Gives the address of the pingback server that handles pingbacks to the current document.
prefetch	External Resource	External Resource	Specifies that the target resource should be preemptively cached.
prev	Hyperlink	Hyperlink	Indicates that the current document is a part of a series, and that the previous document in the series is the referenced document.
search	Hyperlink	Hyperlink	Gives a link to a resource that can be used to search through the current document and its related pages.
sidebar	Hyperlink	Hyperlink	Specifies that the referenced document, if retrieved, is intended to be shown in the browser's sidebar (if it has one).
stylesheet	External Resource	not allowed	Imports a stylesheet.
tag	Hyperlink	Hyperlink	Gives a tag (identified by the given address) that applies to the current document.

Some of the types described below list synonyms for these values. These are to be handled as specified by user agents, but must not be used in documents.

4.12.4.1 Link type "`alternate`"

The [alternate](#rel-alternate) keyword may be used with [link](semantics.html#the-link-element), [a](text-level-semantics.html#the-a-element), and [area](the-map-element.html#the-area-element) elements.

The meaning of this keyword depends on the values of the other attributes.

If the element is a [link](semantics.html#the-link-element) element and the [rel](semantics.html#attr-link-rel) attribute also contains the keyword [stylesheet](#link-type-stylesheet)

The [alternate](#rel-alternate) keyword modifies the meaning of the [stylesheet](#link-type-stylesheet) keyword in the way described for that keyword. The [alternate](#rel-alternate) keyword does not create a link of its own.

The [alternate](#rel-alternate) keyword is used with the [type](#attr-hyperlink-type) attribute set to the value application/rss+xml or the value application/atom+xml

The keyword creates a hyperlink referencing a syndication feed (though not necessarily syndicating exactly the same content as the current page).

The first [link](semantics.html#the-link-element), [a](text-level-semantics.html#the-a-element), or [area](the-map-element.html#the-area-element) element in the document (in tree order) with the [alternate](#rel-alternate) keyword used with the [type](#attr-hyperlink-type) attribute set to the valueapplication/rss+xml or the value application/atom+xml must be treated as the default syndication feed for the purposes of feed autodiscovery.

The following [link](semantics.html#the-link-element) element gives the syndication feed for the current page:

The following extract offers various different syndication feeds:

You can access the planets database using Atom feeds:

Otherwise

The keyword creates a hyperlink referencing an alternate representation of the current document.

The nature of the referenced document is given by the [media](#attr-hyperlink-media), [hreflang](#attr-hyperlink-hreflang), and [type](#attr-hyperlink-type) attributes.

If the [alternate](#rel-alternate) keyword is used with the [media](#attr-hyperlink-media) attribute, it indicates that the referenced document is intended for use with the media specified.

If the [alternate](#rel-alternate) keyword is used with the [hreflang](#attr-hyperlink-hreflang) attribute, and that attribute's value differs from the root element's language, it indicates that the referenced document is a translation.

If the [alternate](#rel-alternate) keyword is used with the [type](#attr-hyperlink-type) attribute, it indicates that the referenced document is a reformulation of the current document in the specified format.

The [media](#attr-hyperlink-media), [hreflang](#attr-hyperlink-hreflang), and [type](#attr-hyperlink-type) attributes can be combined when specified with the [alternate](#rel-alternate) keyword.

For example, the following link is a French translation that uses the PDF format:

This relationship is transitive — that is, if a document links to two other documents with the link type "[alternate](#rel-alternate)", then, in addition to implying that those documents are alternative representations of the first document, it is also implying that those two documents are alternative representations of each other.

The [author](#link-type-author) keyword may be used with [link](semantics.html#the-link-element), [a](text-level-semantics.html#the-a-element), and [area](the-map-element.html#the-area-element) elements. This keyword creates a hyperlink.

For [a](text-level-semantics.html#the-a-element) and [area](the-map-element.html#the-area-element) elements, the [author](#link-type-author) keyword indicates that the referenced document provides further information about the author of the nearest [article](sections.html#the-article-element) element ancestor of the element defining the hyperlink, if there is one, or of the page as a whole, otherwise.

For [link](semantics.html#the-link-element) elements, the [author](#link-type-author) keyword indicates that the referenced document provides further information about the author for the page as a whole.

The "referenced document" can be, and often is, amailto: URL giving the e-mail address of the author. [MAILTO]

Synonyms: For historical reasons, user agents must also treat [link](semantics.html#the-link-element), [a](text-level-semantics.html#the-a-element), and[area](the-map-element.html#the-area-element) elements that have a rev attribute with the value "made" as having the [author](#link-type-author) keyword specified as a link relationship.

4.12.4.3 Link type "`bookmark`"

The [bookmark](#link-type-bookmark) keyword may be used with [a](text-level-semantics.html#the-a-element) and [area](the-map-element.html#the-area-element) elements. This keyword creates a hyperlink.

The [bookmark](#link-type-bookmark) keyword gives a permalink for the nearest ancestor [article](sections.html#the-article-element) element of the linking element in question, or of the section the linking element is most closely associated with, if there are no ancestor[article](sections.html#the-article-element) elements.

The following snippet has three permalinks. A user agent could determine which permalink applies to which part of the spec by looking at where the permalinks are given.

...

Example of permalinks

First example

This permalink applies to only the content from the first H2 to the second H2. The DIV isn't exactly that section, but it roughly corresponds to it.

Second example

This permalink applies to the outer ARTICLE element (which could be, e.g., a blog post).

This permalink applies to the inner ARTICLE element (which could be, e.g., a blog comment).

...

4.12.4.4 Link type "`external`"

The [external](#link-type-external) keyword may be used with [a](text-level-semantics.html#the-a-element) and [area](the-map-element.html#the-area-element) elements. This keyword creates a hyperlink.

The [external](#link-type-external) keyword indicates that the link is leading to a document that is not part of the site that the current document forms a part of.

4.12.4.5 Link type "`help`"

The [help](#link-type-help) keyword may be used with[link](semantics.html#the-link-element), [a](text-level-semantics.html#the-a-element), and [area](the-map-element.html#the-area-element) elements. This keyword creates a hyperlink.

For [a](text-level-semantics.html#the-a-element) and [area](the-map-element.html#the-area-element) elements, the [help](#link-type-help) keyword indicates that the referenced document provides further help information for the parent of the element defining the hyperlink, and its children.

In the following example, the form control has associated context-sensitive help. The user agent could use this information, for example, displaying the referenced document if the user presses the "Help" or "F1" key.

Topic: (Help)

For [link](semantics.html#the-link-element) elements, the [help](#link-type-help) keyword indicates that the referenced document provides help for the page as a whole.

4.12.4.6 Link type "`icon`"

The [icon](#rel-icon) keyword may be used with[link](semantics.html#the-link-element) elements. This keyword creates an external resource link.

The specified resource is an icon representing the page or site, and should be used by the user agent when representing the page in the user interface.

Icons could be auditory icons, visual icons, or other kinds of icons. If multiple icons are provided, the user agent must select the most appropriate icon according to the [type](semantics.html#attr-link-type), [media](semantics.html#attr-link-media), and [sizes](#attr-link-sizes) attributes. If there are multiple equally appropriate icons, user agents must use the last one declared in tree order. If the user agent tries to use an icon but that icon is determined, upon closer examination, to in fact be inappropriate (e.g. because it uses an unsupported format), then the user agent must try the next-most-appropriate icon as determined by the attributes.

There is no default type for resources given by the [icon](#rel-icon) keyword. However, for the purposes ofdetermining the type of the resource, user agents must expect the resource to be an image.

The sizes attribute gives the sizes of icons for visual media.

If specified, the attribute must have a value that is anunordered set of unique space-separated tokens, which are ASCII case-insensitive. The values must all be either an ASCII case-insensitive match for the string "[any](#attr-link-sizes-any)", or a value that consists of two valid non-negative integers that do not have a leading U+0030 DIGIT ZERO (0) character and that are separated by a single U+0078 LATIN SMALL LETTER X or U+0058 LATIN CAPITAL LETTER X character.

The keywords represent icon sizes.

To parse and process the attribute's value, the user agent must first split the attribute's value on spaces, and must then parse each resulting keyword to determine what it represents.

The any keyword represents that the resource contains a scalable icon, e.g. as provided by an SVG image.

Other keywords must be further parsed as follows to determine what they represent:

If the keyword doesn't contain exactly one U+0078 LATIN SMALL LETTER X or U+0058 LATIN CAPITAL LETTER X character, then this keyword doesn't represent anything. Abort these steps for that keyword.
Let width string be the string before the "x" or "X".
Let height string be the string after the "x" or "X".
If either width string or height string start with a U+0030 DIGIT ZERO (0) character or contain any characters other than characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), then this keyword doesn't represent anything. Abort these steps for that keyword.
Apply the rules for parsing non-negative integers to width string to obtain width.
Apply the rules for parsing non-negative integers to height string to obtain height.
The keyword represents that the resource contains a bitmap icon with a width of width device pixels and a height of height device pixels.

The keywords specified on the [sizes](#attr-link-sizes) attribute must not represent icon sizes that are not actually available in the linked resource.

If the attribute is not specified, then the user agent must assume that the given icon is appropriate, but less appropriate than an icon of a known and appropriate size.

In the absence of a [link](semantics.html#the-link-element) with the [icon](#rel-icon) keyword, for [Document](infrastructure.html#document)s obtained over HTTP or HTTPS, user agents may instead attempt tofetch and use an icon with the absolute URL obtained by resolving the URL "/favicon.ico" against the document's address, as if the page had declared that icon using the[icon](#rel-icon) keyword.

The following snippet shows the top part of an application with several icons.

lsForums — Inbox ...

4.12.4.7 Link type "`license`"

The [license](#link-type-license) keyword may be used with [link](semantics.html#the-link-element), [a](text-level-semantics.html#the-a-element), and [area](the-map-element.html#the-area-element) elements. This keyword creates a hyperlink.

The [license](#link-type-license) keyword indicates that the referenced document provides the copyright license terms under which the main content of the current document is provided.

This specification does not specify how to distinguish between the main content of a document and content that is not deemed to be part of that main content. The distinction should be made clear to the user.

Consider a photo sharing site. A page on that site might describe and show a photograph, and the page might be marked up as follows:

Exampl Pictures: Kissat

Kissat

One of them has six toes!

MIT Licensed

In this case the [license](#link-type-license) applies to just the photo (the main content of the document), not the whole document. In particular not the design of the page itself, which is covered by the copyright given at the bottom of the document. This could be made clearer in the styling (e.g. making the license link prominently positioned near the photograph, while having the page copyright in light small text at the foot of the page.

Synonyms: For historical reasons, user agents must also treat the keyword "copyright" like the [license](#link-type-license) keyword.

4.12.4.8 Link type "`nofollow`"

The [nofollow](#link-type-nofollow) keyword may be used with [a](text-level-semantics.html#the-a-element) and [area](the-map-element.html#the-area-element) elements. This keyword does not create a hyperlink, but annotates any other hyperlinks created by the element (the implied hyperlink, if no other keywords create one).

The [nofollow](#link-type-nofollow) keyword indicates that the link is not endorsed by the original author or publisher of the page, or that the link to the referenced document was included primarily because of a commercial relationship between people affiliated with the two pages.

4.12.4.9 Link type "`noreferrer`"

The [noreferrer](#link-type-noreferrer) keyword may be used with [a](text-level-semantics.html#the-a-element) and [area](the-map-element.html#the-area-element) elements. This keyword does not create a hyperlink, but annotates any other hyperlinks created by the element (the implied hyperlink, if no other keywords create one).

It indicates that no referrer information is to be leaked when following the link.

4.12.4.10 Link type "`pingback`"

The [pingback](#link-type-pingback) keyword may be used with [link](semantics.html#the-link-element) elements. This keyword creates an external resource link.

For the semantics of the [pingback](#link-type-pingback) keyword, see the Pingback 1.0 specification. [PINGBACK]

4.12.4.11 Link type "`prefetch`"

The [prefetch](#link-type-prefetch) keyword may be used with [link](semantics.html#the-link-element), [a](text-level-semantics.html#the-a-element), and [area](the-map-element.html#the-area-element) elements. This keyword creates an external resource link.

The [prefetch](#link-type-prefetch) keyword indicates that preemptively fetching and caching the specified resource is likely to be beneficial, as it is highly likely that the user will require this resource.

There is no default type for resources given by the [prefetch](#link-type-prefetch) keyword.

4.12.4.12 Link type "`search`"

The [search](#link-type-search) keyword may be used with [link](semantics.html#the-link-element), [a](text-level-semantics.html#the-a-element), and [area](the-map-element.html#the-area-element) elements. This keyword creates a hyperlink.

The [search](#link-type-search) keyword indicates that the referenced document provides an interface specifically for searching the document and its related resources.

OpenSearch description documents can be used with[link](semantics.html#the-link-element) elements and the [search](#link-type-search) link type to enable user agents to autodiscover search interfaces. [OPENSEARCH]

The [sidebar](#link-type-sidebar) keyword may be used with [link](semantics.html#the-link-element), [a](text-level-semantics.html#the-a-element), and [area](the-map-element.html#the-area-element) elements. This keyword creates a hyperlink.

The [sidebar](#link-type-sidebar) keyword indicates that the referenced document, if retrieved, is intended to be shown in a secondary browsing context (if possible), instead of in the current browsing context.

A hyperlink with the [sidebar](#link-type-sidebar) keyword specified is a .

4.12.4.14 Link type "`stylesheet`"

The [stylesheet](#link-type-stylesheet) keyword may be used with [link](semantics.html#the-link-element) elements. This keyword creates an external resource link that contributes to the styling processing model.

The specified resource is a resource that describes how to present the document. Exactly how the resource is to be processed depends on the actual type of the resource.

If the [alternate](#rel-alternate) keyword is also specified on the [link](semantics.html#the-link-element) element, then the link is an alternative stylesheet; in this case, the [title](elements.html#the-title-attribute) attribute must be specified on the[link](semantics.html#the-link-element) element, with a non-empty value.

The default type for resources given by the [stylesheet](#link-type-stylesheet) keyword is text/css.

The appropriate time to obtain the resource is when theexternal resource link is created or when its element is inserted into a document, whichever happens last. If the resource is an alternative stylesheet then the user agent may defer obtaining the resource until it is part of the preferred style sheet set. [CSSOM]

Quirk: If the document has been set toquirks mode, has the same origin as theURL of the external resource, and the Content-Type metadata of the external resource is not a supported style sheet type, the user agent must instead assume it to be text/css.

4.12.4.15 Link type "`tag`"

The [tag](#link-type-tag) keyword may be used with [link](semantics.html#the-link-element), [a](text-level-semantics.html#the-a-element), and [area](the-map-element.html#the-area-element) elements. This keyword creates a hyperlink.

The [tag](#link-type-tag) keyword indicates that the_tag_ that the referenced document represents applies to the current document.

Since it indicates that the tag applies to the current document, it would be inappropriate to use this keyword in the markup of a tag cloud, which lists the popular tag across a set of pages.

4.12.4.16 Sequential link types

Some documents form part of a sequence of documents.

A sequence of documents is one where each document can have a_previous sibling_ and a next sibling. A document with no previous sibling is the start of its sequence, a document with no next sibling is the end of its sequence.

A document may be part of multiple sequences.

4.12.4.16.1 Link type "`next`"

The [next](#link-type-next) keyword may be used with[link](semantics.html#the-link-element), [a](text-level-semantics.html#the-a-element), and [area](the-map-element.html#the-area-element) elements. This keyword creates a hyperlink.

The [next](#link-type-next) keyword indicates that the document is part of a sequence, and that the link is leading to the document that is the next logical document in the sequence.

4.12.4.16.2 Link type "`prev`"

The [prev](#link-type-prev) keyword may be used with[link](semantics.html#the-link-element), [a](text-level-semantics.html#the-a-element), and [area](the-map-element.html#the-area-element) elements. This keyword creates a hyperlink.

The [prev](#link-type-prev) keyword indicates that the document is part of a sequence, and that the link is leading to the document that is the previous logical document in the sequence.

Synonyms: For historical reasons, user agents must also treat the keyword "previous" like the [prev](#link-type-prev) keyword.

4.12.4.17 Other link types

Extensions to the predefined set of link types may be registered in the Microformats wiki existing-rel-values page. [MFREL]

Anyone is free to edit the Microformats wiki existing-rel-values page at any time to add a type. Extension types must be specified with the following information:

Keyword

The actual value being defined. The value should not be confusingly similar to any other defined value (e.g. differing only in case).

If the value contains a U+003A COLON character (:), it must also be an absolute URL.

Effect on... [link](semantics.html#the-link-element)

One of the following:

Not allowed

The keyword must not be specified on [link](semantics.html#the-link-element) elements.

Hyperlink

The keyword may be specified on a [link](semantics.html#the-link-element) element; it creates a hyperlink.

External Resource

The keyword may be specified on a [link](semantics.html#the-link-element) element; it creates an external resource link.

Effect on... [a](text-level-semantics.html#the-a-element) and [area](the-map-element.html#the-area-element)

One of the following:

Not allowed

The keyword must not be specified on [a](text-level-semantics.html#the-a-element) and[area](the-map-element.html#the-area-element) elements.

Hyperlink

The keyword may be specified on [a](text-level-semantics.html#the-a-element) and[area](the-map-element.html#the-area-element) elements; it creates ahyperlink.

External Resource

The keyword may be specified on a [a](text-level-semantics.html#the-a-element) and[area](the-map-element.html#the-area-element) elements; it creates an external resource link.

Hyperlink Annotation

The keyword may be specified on a [a](text-level-semantics.html#the-a-element) and[area](the-map-element.html#the-area-element) elements; it annotates other hyperlinks created by the element.

Brief description

A short non-normative description of what the keyword's meaning is.

Specification

A link to a more detailed description of the keyword's semantics and requirements. It could be another page on the Wiki, or a link to an external page.

Synonyms

A list of other keyword values that have exactly the same processing requirements. Authors should not use the values defined to be synonyms, they are only intended to allow user agents to support legacy content. Anyone may remove synonyms that are not used in practice; only names that need to be processed as synonyms for compatibility with legacy content are to be registered in this way.

Status

One of the following:

Proposed

The keyword has not received wide peer review and approval. Someone has proposed it and is, or soon will be, using it.

Ratified

The keyword has received wide peer review and approval. It has a specification that unambiguously defines how to handle pages that use the keyword, including when they use it in incorrect ways.

Discontinued

The keyword has received wide peer review and it has been found wanting. Existing pages are using this keyword, but new pages should avoid it. The "brief description" and "specification" entries will give details of what authors should use instead, if anything.

If a keyword is found to be redundant with existing values, it should be removed and listed as a synonym for the existing value.

If a keyword is registered in the "proposed" state for a period of a month or more without being used or specified, then it may be removed from the registry.

If a keyword is added with the "proposed" status and found to be redundant with existing values, it should be removed and listed as a synonym for the existing value. If a keyword is added with the "proposed" status and found to be harmful, then it should be changed to "discontinued" status.

Anyone can change the status at any time, but should only do so in accordance with the definitions above.

Conformance checkers must use the information given on the Microformats wiki existing-rel-values page to establish if a value is allowed or not: values defined in this specification or marked as "proposed" or "ratified" must be accepted when used on the elements for which they apply as described in the "Effect on..." field, whereas values marked as "discontinued" or not listed in either this specification or on the aforementioned page must be rejected as invalid. Conformance checkers may cache this information (e.g. for performance reasons or to avoid the use of unreliable network connectivity).

When an author uses a new type not defined by either this specification or the Wiki page, conformance checkers should offer to add the value to the Wiki, with the details described above, with the "proposed" status.

Types defined as extensions in the Microformats wiki existing-rel-values page with the status "proposed" or "ratified" may be used with the rel attribute on [link](semantics.html#the-link-element), [a](text-level-semantics.html#the-a-element), and [area](the-map-element.html#the-area-element) elements in accordance to the "Effect on..." field. [MFREL]

4.13 Common idioms without dedicated elements

4.13.1 The main part of the content

The main content of a page — not including headers and footers, navigation links, sidebars, advertisements, and so forth — can be marked up in a variety of ways, depending on the needs of the author.

The simplest solution is to not mark up the main content at all, and just leave it as implicit. Another way to think of this is that the [body](sections.html#the-body-element) elements marks up the main content of the page, and the bits that aren't main content are excluded through the use of more appropriate elements like [aside](sections.html#the-aside-element) and[nav](sections.html#the-nav-element).

Here is a short Web page marked up along this minimalistic school of thought. The main content is highlighted. Notice how all the other content in the [body](sections.html#the-body-element) is marked up with elements to indicate that it's not part of the main content, in this case [header](sections.html#the-header-element), [nav](sections.html#the-nav-element), and[footer](sections.html#the-footer-element).

My Toys

My toys

I really like my chained book and my telephone. I'm not such a** **fan of my big ball.

** **

Another toy I like is my mirror.

If the main content is an independent unit of content that one could imagine syndicating independently, then the[article](sections.html#the-article-element) element would be appropriate to mark up the main content of the document.

The document in the previous example is here recast as a blog post:

The Boy Blog: My Toys

The Boy Blog

** **

My toys

** **

Published August 4th

** **

I really like my chained book and my telephone. I'm not such a** **fan of my big ball.

** **

Another toy I like is my mirror.

** **

If the main content is not an independent unit of content so much as a section of a larger work, for instance a chapter, then the[section](sections.html#the-section-element) element would be appropriate to mark up the main content of the document.

Here is the same document, case as a chapter in an online book:

Chapter 2: My Toys — The Book of the Boy

Chapter 2: My Toys

** **

I really like my chained book and my telephone. I'm not such a** **fan of my big ball.

** **

Another toy I like is my mirror.

** **

If neither [article](sections.html#the-article-element) nor [section](sections.html#the-section-element) would be appropriate, but the main content still needs an explicit element, for example for styling purposes, then the [div](grouping-content.html#the-div-element) element can be used.

This is the same as the original example, but using[div](grouping-content.html#the-div-element) for the main content instead of leaving it implied:

My Toys

My toys

** **

I really like my chained book and my telephone. I'm not such a** **fan of my big ball.

** **

Another toy I like is my mirror.

** **

This specification does not provide a machine-readable way of describing bread-crumb navigation menus. Authors are encouraged to just use a series of links in a paragraph. The [nav](sections.html#the-nav-element) element can be used to mark the section containing these paragraphs as being navigation blocks.

In the following example, the current page can be reached via two paths.

4.13.3 Tag clouds

This specification does not define any markup specifically for marking up lists of keywords that apply to a group of pages (also known as tag clouds). In general, authors are encouraged to either mark up such lists using [ul](grouping-content.html#the-ul-element) elements with explicit inline counts that are then hidden and turned into a presentational effect using a style sheet, or to use SVG.

Here, three tags are included in a short tag cloud:

...

apple (popular)
kiwi (rare)
pear (very popular)

The actual frequency of each tag is given using the [title](elements.html#the-title-attribute) attribute. A CSS style sheet is provided to convert the markup into a cloud of differently-sized words, but for user agents that do not support CSS or are not visual, the markup contains annotations like "(popular)" or "(rare)" to categorize the various tags by frequency, thus enabling all users to benefit from the information.

The [ul](grouping-content.html#the-ul-element) element is used (rather than[ol](grouping-content.html#the-ol-element)) because the order is not particularly important: while the list is in fact ordered alphabetically, it would convey the same information if ordered by, say, the length of the tag.

The [tag](#link-type-tag) [rel](#attr-hyperlink-rel)-keyword is not used on these [a](text-level-semantics.html#the-a-element) elements because they do not represent tags that apply to the page itself; they are just part of an index listing the tags themselves.

4.13.4 Conversations

This specification does not define a specific element for marking up conversations, meeting minutes, chat transcripts, dialogues in screenplays, instant message logs, and other situations where different players take turns in discourse.

Instead, authors are encouraged to mark up conversations using[p](grouping-content.html#the-p-element) elements and punctuation. Authors who need to mark the speaker for styling purposes are encouraged to use[span](text-level-semantics.html#the-span-element) or [b](text-level-semantics.html#the-b-element). Paragraphs with their text wrapped in the [i](text-level-semantics.html#the-i-element) element can be used for marking up stage directions.

This example demonstrates this using an extract from Abbot and Costello's famous sketch, Who's on first:

Costello: Look, you gotta first baseman?

Abbott: Certainly.

Costello: Who's playing first?

Abbott: That's right.

Costello becomes exasperated.

Costello: When you pay off the first baseman every month, who gets the money?

Abbott: Every dollar of it.

The following extract shows how an IM conversation log could be marked up.

14:22 egof I'm not that nerdy, I've only seen 30% of the star trek episodes

14:23 kaj if you know what percentage of the star trek episodes you have seen, you are inarguably nerdy

14:23 egof it's unarguably

14:23 * kaj blinks

14:24 kaj you are not helping your case

4.13.5 Footnotes

HTML does not have a dedicated mechanism for marking up footnotes. Here are the recommended alternatives.

For short inline annotations, the [title](elements.html#the-title-attribute) attribute should be used.

In this example, two parts of a dialogue are annotated with footnote-like content using the [title](elements.html#the-title-attribute) attribute.

Customer: Hello! I wish to register a complaint. Hello. Miss?

Shopkeeper: **Watcha mean, miss?

Customer: Uh, I'm sorry, I have a cold. I wish to make a complaint.

Shopkeeper: Sorry, we're closing for lunch.

For longer annotations, the [a](text-level-semantics.html#the-a-element) element should be used, pointing to an element later in the document. The convention is that the contents of the link be a number in square brackets.

In this example, a footnote in the dialogue links to a paragraph below the dialogue. The paragraph then reciprocally links back to the dialogue, allowing the user to return to the location of the footnote.

Announcer: Number 16: The hand.

Interviewer: Good evening. I have with me in the studio tonight Mr Norman St John Polevaulter, who for the past few years has been contradicting people. Mr Polevaulter, why do you contradict people?

Norman: I don't. ^[1]

Interviewer: You told me you did! _..._

[1] This is, naturally, a lie, but paradoxically if it were true he could not say so without contradicting the interviewer and thus making it false.

For side notes, longer annotations that apply to entire sections of the text rather than just specific words or sentences, the[aside](sections.html#the-aside-element) element should be used.

In this example, a sidebar is given after a dialogue, giving it some context.

Customer: I will not buy this record, it is scratched.

Shopkeeper: I'm sorry?

Customer: I will not buy this record, it is scratched.

Shopkeeper: No no no, this's'a tobacconist's.

For figures or tables, footnotes can be included in the relevant[figcaption](grouping-content.html#the-figcaption-element) or [caption](tabular-data.html#the-caption-element) element, or in surrounding prose.

In this example, a table has cells with footnotes that are given in prose. A [figure](grouping-content.html#the-figure-element) element is used to give a single legend to the combination of the table and its footnotes.

Table 1. Alternative activities for knights.

Activity	Location	Cost
Dance	Wherever possible	£0¹
Routines, chorus scenes²	Undisclosed	Undisclosed
Dining³	Camelot	Cost of ham, jam, and spam⁴

1. Assumed.

2. Footwork impeccable.

3. Quality described as "well".

4. A lot.

4.14 Matching HTML elements using selectors

4.14.1 Case-sensitivity

Attribute and element names of HTML elements in HTML documents must be treated asASCII case-insensitive.

Classes from the [class](elements.html#classes) attribute of HTML elements in documents that are in quirks mode must be treated as ASCII case-insensitive.

Attribute selectors on an HTML element in an HTML document must treat the values of attributes with the following names as ASCII case-insensitive, with one exception as noted below:

accept
accept-charset
align
alink
axis
bgcolor
charset
checked
clear
codetype
color
compact
declare
defer
dir
direction
disabled
enctype
face
frame
hreflang
http-equiv
lang
language
link
media
method
multiple
nohref
noresize
noshade
nowrap
readonly
rel
rev
rules
scope
scrolling
selected
shape
target
text
type (except as specified below)
valign
valuetype
vlink

All other attribute values on HTML elements must be treated as case-sensitive.

The exception to the list above is the [type](grouping-content.html#attr-ol-type) attribute on [ol](grouping-content.html#the-ol-element) elements, which must be treated as case-sensitive.

4.14.2 Pseudo-classes

There are a number of dynamic selectors that can be used with HTML. This section defines when these selectors match HTML elements.

:link

:visited

All [a](text-level-semantics.html#the-a-element) elements that have an [href](#attr-hyperlink-href) attribute, all[area](the-map-element.html#the-area-element) elements that have an [href](#attr-hyperlink-href) attribute, and all[link](semantics.html#the-link-element) elements that have an [href](semantics.html#attr-link-href) attribute, must match one of[:link](#selector-link) and [:visited](#selector-visited).

Other specifications might apply more specific rules regarding how these elements are to match these pseudo-elements, to mitigate some privacy concerns that apply with straightforward implementations of this requirement.

:active

The [:active](#selector-active) pseudo-class is defined to match an element while an element is being activated by the user. For the purposes of defining the [:active](#selector-active) pseudo-class only, an HTML user agent must consider an element as being activated if it is:

An element falling into one of the following categories between the time the user begins to indicate an intent to trigger the element's activation behavior and either the time the user stops indicating an intent to trigger the element's activation behavior, or the time the element's activation behavior has finished running, which ever comes first:
- [a](text-level-semantics.html#the-a-element) elements that have an [href](#attr-hyperlink-href) attribute
- [area](the-map-element.html#the-area-element) elements that have an [href](#attr-hyperlink-href) attribute
- [link](semantics.html#the-link-element) elements that have an [href](semantics.html#attr-link-href) attribute
- [button](the-button-element.html#the-button-element) elements that are not disabled
- [input](the-input-element.html#the-input-element) elements whose [type](the-input-element.html#attr-input-type) attribute is in the Submit Button, Image Button, Reset Button, or Button state
- [command](interactive-elements.html#the-command-element) elements that do not have a [disabled](interactive-elements.html#attr-command-disabled) attribute
- elements that are specially focusable
  For example, if the user is using a keyboard to push a [button](the-button-element.html#the-button-element) element by pressing the space bar, the element would match this pseudo-class in between the time that the element received the keydown event and the time the element received the keyup event.
An element that the user indicates using a pointing device while that pointing device is in the "down" state (e.g. for a mouse, between the time the mouse button is pressed and the time it is depressed).
An element that has a descendant that is currently matching the [:active](#selector-active) pseudo-class.

:enabled

The [:enabled](#selector-enabled) pseudo-class must match any element falling into one of the following categories:

[a](text-level-semantics.html#the-a-element) elements that have an [href](#attr-hyperlink-href) attribute
[area](the-map-element.html#the-area-element) elements that have an [href](#attr-hyperlink-href) attribute
[link](semantics.html#the-link-element) elements that have an [href](semantics.html#attr-link-href) attribute
[button](the-button-element.html#the-button-element) elements that are not disabled
[input](the-input-element.html#the-input-element) elements whose [type](the-input-element.html#attr-input-type) attribute are not in theHidden state and that are not disabled
[select](the-button-element.html#the-select-element) elements that are not disabled
[textarea](the-button-element.html#the-textarea-element) elements that are not disabled
[optgroup](the-button-element.html#the-optgroup-element) elements that are not disabled
[option](the-button-element.html#the-option-element) elements that are not disabled
[command](interactive-elements.html#the-command-element) elements that do not have a [disabled](interactive-elements.html#attr-command-disabled) attribute
[li](grouping-content.html#the-li-element) elements that are children of[menu](interactive-elements.html#the-menu-element) elements, and that have a child element that defines a command, if the first such element's Disabled State facet is false (not disabled)
[fieldset](forms.html#the-fieldset-element) elements that do not have a [disabled](forms.html#attr-fieldset-disabled) attribute

:disabled

The [:disabled](#selector-disabled) pseudo-class must match any element falling into one of the following categories:

[button](the-button-element.html#the-button-element) elements that are disabled
[input](the-input-element.html#the-input-element) elements whose [type](the-input-element.html#attr-input-type) attribute are not in theHidden state and that are disabled
[select](the-button-element.html#the-select-element) elements that are disabled
[textarea](the-button-element.html#the-textarea-element) elements that are disabled
[optgroup](the-button-element.html#the-optgroup-element) elements that are disabled
[option](the-button-element.html#the-option-element) elements that are disabled
[command](interactive-elements.html#the-command-element) elements that have a [disabled](interactive-elements.html#attr-command-disabled) attribute
[li](grouping-content.html#the-li-element) elements that are children of[menu](interactive-elements.html#the-menu-element) elements, and that have a child element that defines a command, if the first such element's Disabled State facet is true (disabled)
[fieldset](forms.html#the-fieldset-element) elements that have a [disabled](forms.html#attr-fieldset-disabled) attribute

:checked

The [:checked](#selector-checked) pseudo-class must match any element falling into one of the following categories:

[input](the-input-element.html#the-input-element) elements whose [type](the-input-element.html#attr-input-type) attribute is in the Checkbox state and whosecheckedness state is true
[input](the-input-element.html#the-input-element) elements whose [type](the-input-element.html#attr-input-type) attribute is in the Radio Button state and whosecheckedness state is true
[option](the-button-element.html#the-option-element) elements whose selectedness is true
[command](interactive-elements.html#the-command-element) elements whose [type](interactive-elements.html#attr-command-type) attribute is in the Checkbox state and that have a [checked](interactive-elements.html#attr-command-checked) attribute
[command](interactive-elements.html#the-command-element) elements whose [type](interactive-elements.html#attr-command-type) attribute is in the Radio state and that have a [checked](interactive-elements.html#attr-command-checked) attribute

:indeterminate

The [:indeterminate](#selector-indeterminate) pseudo-class must match any element falling into one of the following categories:

[input](the-input-element.html#the-input-element) elements whose [type](the-input-element.html#attr-input-type) attribute is in the Checkbox state and whose[indeterminate](the-input-element.html#dom-input-indeterminate) IDL attribute is set to true
[progress](the-button-element.html#the-progress-element) elements with no [value](the-button-element.html#attr-progress-value) content attribute

:default

The [:default](#selector-default) pseudo-class must match any element falling into one of the following categories:

[button](the-button-element.html#the-button-element) elements that are their form'sdefault button
[input](the-input-element.html#the-input-element) elements whose [type](the-input-element.html#attr-input-type) attribute is in the Submit Button or Image Button state, and that are their form's default button
[input](the-input-element.html#the-input-element) elements to which the [checked](the-input-element.html#attr-input-checked) attribute applies and that have a [checked](the-input-element.html#attr-input-checked) attribute
[option](the-button-element.html#the-option-element) elements that have a [selected](the-button-element.html#attr-option-selected) attribute

:valid

The [:valid](#selector-valid) pseudo-class must match all elements that are candidates for constraint validation and that satisfy their constraints.

:invalid

The [:invalid](#selector-invalid) pseudo-class must match all elements that are candidates for constraint validation but that do not satisfy their constraints.

:in-range

The [:in-range](#selector-in-range) pseudo-class must match all elements that are candidates for constraint validation, have range limitations, and that are neither suffering from an underflow norsuffering from an overflow.

:out-of-range

The [:out-of-range](#selector-out-of-range) pseudo-class must match all elements that are candidates for constraint validation, have range limitations, and that are either suffering from an underflow orsuffering from an overflow.

:required

The [:required](#selector-required) pseudo-class must match any element falling into one of the following categories:

[input](the-input-element.html#the-input-element) elements that are required
[select](the-button-element.html#the-select-element) elements that have a [required](the-button-element.html#attr-select-required) attribute
[textarea](the-button-element.html#the-textarea-element) elements that have a [required](the-button-element.html#attr-textarea-required) attribute

:optional

The [:optional](#selector-optional) pseudo-class must match any element falling into one of the following categories:

[input](the-input-element.html#the-input-element) elements to which the [required](common-input-element-attributes.html#attr-input-required) attribute applies that are not required
[select](the-button-element.html#the-select-element) elements that do not have a [required](the-button-element.html#attr-select-required) attribute
[textarea](the-button-element.html#the-textarea-element) elements that do not have a [required](the-button-element.html#attr-textarea-required) attribute

:read-only

:read-write

The [:read-write](#selector-read-write) pseudo-class must match any element falling into one of the following categories:

[input](the-input-element.html#the-input-element) elements to which the [readonly](common-input-element-attributes.html#attr-input-readonly) attribute applies, but that are not immutable (i.e. that do not have the [readonly](common-input-element-attributes.html#attr-input-readonly) attribute specified and that are not disabled)
[textarea](the-button-element.html#the-textarea-element) elements that do not have a [readonly](the-button-element.html#attr-textarea-readonly) attribute, and that are not disabled
elements that are editable and are neither[input](the-input-element.html#the-input-element) elemenst nor [textarea](the-button-element.html#the-textarea-element) elements

The [:read-only](#selector-read-only) pseudo-class must match all other HTML elements.

:ltr

The [:ltr](#selector-ltr) pseudo-class must match all elements whose directionality is 'ltr'.

:rtl

The [:rtl](#selector-rtl) pseudo-class must match all elements whose directionality is 'rtl'.

Another section of this specification defines the_target element_ used with the :target pseudo-class.

This specification does not define when an element matches the :hover, :focus, or :lang() dynamic pseudo-classes, as those are all defined in sufficient detail in a language-agnostic fashion in the Selectors specification. [SELECTORS]

4.12 Links — HTML5 (original) (raw)

4.12 Links

4.12.1 Introduction

4.12.2 Links created by [a](text-level-semantics.html#the-a-element) and [area](the-map-element.html#the-area-element) elements

4.12.3 Following hyperlinks

4.12.4 Link types

4.12.4.1 Link type "alternate"

4.12.4.3 Link type "bookmark"

Example of permalinks

First example

Second example

4.12.4.4 Link type "external"

4.12.4.5 Link type "help"

4.12.4.6 Link type "icon"

4.12.4.7 Link type "license"

Kissat

4.12.4.8 Link type "nofollow"

4.12.4.9 Link type "noreferrer"

4.12.4.10 Link type "pingback"

4.12.4.11 Link type "prefetch"

4.12.4.12 Link type "search"

4.12.4.14 Link type "stylesheet"

4.12.4.15 Link type "tag"

4.12.4.16 Sequential link types

4.12.4.16.1 Link type "next"

4.12.4.16.2 Link type "prev"

4.12.4.17 Other link types

4.13 Common idioms without dedicated elements

4.13.1 The main part of the content

4.13.2 Bread crumb navigation

4.13.3 Tag clouds

4.13.4 Conversations

4.13.5 Footnotes

4.14 Matching HTML elements using selectors

4.14.1 Case-sensitivity

4.14.2 Pseudo-classes

4.12.2 Links created by `[a](text-level-semantics.html#the-a-element)` and `[area](the-map-element.html#the-area-element)` elements

4.12.4.1 Link type "`alternate`"

4.12.4.3 Link type "`bookmark`"

4.12.4.4 Link type "`external`"

4.12.4.5 Link type "`help`"

4.12.4.6 Link type "`icon`"

4.12.4.7 Link type "`license`"

4.12.4.8 Link type "`nofollow`"

4.12.4.9 Link type "`noreferrer`"

4.12.4.10 Link type "`pingback`"

4.12.4.11 Link type "`prefetch`"

4.12.4.12 Link type "`search`"

4.12.4.14 Link type "`stylesheet`"

4.12.4.15 Link type "`tag`"

4.12.4.16.1 Link type "`next`"

4.12.4.16.2 Link type "`prev`"