W3C

HTML5

4.11.5 Commands – Table of contents – 5 Loading Web pages

1. 1. 4.12 Links
      1. 4.12.1 Introduction
      2. 4.12.2 Links created by a and area elements
      3. 4.12.3 Following hyperlinks
      4. 4.12.4 Link types
         1. 4.12.4.1 Link type "alternate"
         2. 4.12.4.2 Link type "author"
         3. 4.12.4.3 Link type "bookmark"
         4. 4.12.4.4 Link type "external"
         5. 4.12.4.5 Link type "help"
         6. 4.12.4.6 Link type "icon"
         7. 4.12.4.7 Link type "license"
         8. 4.12.4.8 Link type "nofollow"
         9. 4.12.4.9 Link type "noreferrer"
         10. 4.12.4.10 Link type "pingback"
         11. 4.12.4.11 Link type "prefetch"
         12. 4.12.4.12 Link type "search"
         13. 4.12.4.13 Link type "sidebar"
         14. 4.12.4.14 Link type "stylesheet"
         15. 4.12.4.15 Link type "tag"
         16. 4.12.4.16 Sequential link types
             1. 4.12.4.16.1 Link type "next"
             2. 4.12.4.16.2 Link type "prev"
         17. 4.12.4.17 Other link types
   2. 4.13 Common idioms without dedicated elements
      1. 4.13.1 The main part of the content
      2. 4.13.2 Bread crumb navigation
      3. 4.13.3 Tag clouds
      4. 4.13.4 Conversations
      5. 4.13.5 Footnotes
   3. 4.14 Matching HTML elements using selectors
      1. 4.14.1 Case-sensitivity
      2. 4.14.2 Pseudo-classes

4.12.3 Following hyperlinks

When a user follows a hyperlink created by an element, the user agent must resolve the URL given by the href attribute of that element, relative to that element, and if that is successful, must navigate 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 the URL fails, the user agent may report the error to the user in a user-agent-specific manner, may navigate 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 or area element that has a target attribute, then the browsing 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 attribute 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, 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 or area element with no target attribute, but the Document contains a base element with a target attribute, then the browsing 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 attribute of the first such base 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 object with which the element in question is associated as the source browsing context.

To determine which link types apply to a link , a , or area element, the element's rel attribute must be split on spaces. The resulting tokens are the link types that apply to that element.

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.

Synonyms: For historical reasons, user agents must also treat link , a , and area elements that have a rev attribute with the value "made" as having the author keyword specified as a link relationship.

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.

 ...
 <body>
 <h1>Example of permalinks</h1>
 <div id="a">
 <h2>First example</h2>
 <p><a href="a.html" rel="bookmark">This</a> 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.</p>
 </div>
 <h2>Second example</h2>
 <article id="b">
 <p><a href="b.html" rel="bookmark">This</a> permalink applies to
 the outer ARTICLE element (which could be, e.g., a blog post).</p>
 <article id="c">
 <p><a href="c.html" rel="bookmark">This</a> permalink applies to
 the inner ARTICLE element (which could be, e.g., a blog comment).</p>
 </article>
 </article>
 </body>
 ...

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.

 <p><label> Topic: <input name=topic> <a href="help/topic.html" rel="help">(Help)</a></label></p>

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.

There is no default type for resources given by the icon keyword. However, for the purposes of determining the type of the resource, user agents must expect the resource to be an image.

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.

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.

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 with the icon keyword, for Document s obtained over HTTP or HTTPS, user agents may instead attempt to fetch 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 keyword.

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

<!DOCTYPE HTML>
<html>
 <head>
 <title>lsForums — Inbox</title>
 <link rel=icon href=favicon.png sizes="16x16" type="image/png">
 <link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
 <link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
 <link rel=icon href=iphone.png sizes="57x57" type="image/png">
 <link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">
 <link rel=stylesheet href=lsforums.css>
 <script src=lsforums.js></script>
 <meta name=application-name content="lsForums">
 </head>
 <body>
 ...

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:

<!DOCTYPE HTML>
<html>
 <head>
 <title>Exampl Pictures: Kissat</title>
 <link rel="stylesheet" href="/style/default">
 </head>
 <body>
 <h1>Kissat</h1>
 <nav>
 <a href="../">Return to photo index</a>
 </nav>
 <figure>
 <img src="/pix/39627052_fd8dcd98b5.jpg">
 <figcaption>Kissat</figcaption>
 </figure>
 <p>One of them has six toes!</p>
 <p><small><a rel="license" href="http://www.opensource.org/licenses/mit-license.php">MIT Licensed</a></small></p>
 <footer>
 <a href="/">Home</a> | <a href="../">Photo index</a>
 <p><small>© copyright 2009 Exampl Pictures. All Rights Reserved.</small></p>
 </footer>
 </body>
</html>

In this case the 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 keyword.

If a user agent follows a link defined by an a or area element that has the noreferrer keyword, the user agent must not include a Referer (sic) HTTP header (or equivalent for other protocols) in the request.

This keyword also causes the opener attribute to remain null if the hyperlink creates a new browsing context.

The appropriate time to obtain the resource is when the external 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 to quirks mode, has the same origin as the URL 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.

Synonyms: For historical reasons, user agents must also treat the keyword "previous" like the prev keyword.

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.

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 is marked up with elements to indicate that it's not part of the main content, in this case header , nav , and footer .

<!DOCTYPE HTML>
<html>
 <head>
 <title> My Toys </title>
 </head>
 <body>
 <header>
 <h1>My toys</h1>
 </header>
 <nav>
 <p><a href="/">Home</a></p>
 <p><a href="/contact">Contact</a></p>
 </nav>
 <p>I really like my chained book and my telephone. I'm not such a
 fan of my big ball.</p>
 <p>Another toy I like is my mirror.</p>
 <footer>
 <p>© copyright 2010 by the boy</p>
 </footer>
 </body>
</html>

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

<!DOCTYPE HTML>
<html>
 <head>
 <title> The Boy Blog: My Toys </title>
 </head>
 <body>
 <header>
 <h1>The Boy Blog</h1>
 </header>
 <nav>
 <p><a href="/">Home</a></p>
 <p><a href="/contact">Contact</a></p>
 </nav>
 <article>
 <header>
 <h1>My toys</h1>
 <p>Published <time pubdate datetime="2010-08-04">August 4th</time></p>
 </header>
 <p>I really like my chained book and my telephone. I'm not such a
 fan of my big ball.</p>
 <p>Another toy I like is my mirror.</p>
 </article>
 <footer>
 <p>© copyright 2010 by the boy</p>
 </footer>
 </body>
</html>

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

<!DOCTYPE HTML>
<html>
 <head>
 <title> Chapter 2: My Toys — The Book of the Boy </title>
 </head>
 <body>
 <header>
 <h1>Chapter 2: My Toys</h1>
 </header>
 <nav>
 <p><a href="/">Front Page</a></p>
 <p><a href="/toc">Table of Contents</a></p>
 <p><a href="/c1">Chapter 1</a> — <a href="/c3">Chapter 3</a></p>
 </nav>
 <section>
 <p>I really like my chained book and my telephone. I'm not such a
 fan of my big ball.</p>
 <p>Another toy I like is my mirror.</p>
 </section>
 <footer>
 <p>© copyright 2010 by the boy</p>
 </footer>
 </body>
</html>

This is the same as the original example, but using div for the main content instead of leaving it implied:

<!DOCTYPE HTML>
<html>
 <head>
 <title> My Toys </title>
 <style>
 body > div { background: navy; color: yellow; }
 </style>
 </head>
 <body>
 <header>
 <h1>My toys</h1>
 </header>
 <nav>
 <p><a href="/">Home</a></p>
 <p><a href="/contact">Contact</a></p>
 </nav>
 <div>
 <p>I really like my chained book and my telephone. I'm not such a
 fan of my big ball.</p>
 <p>Another toy I like is my mirror.</p>
 </div>
 <footer>
 <p>© copyright 2010 by the boy</p>
 </footer>
 </body>
</html>

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

<nav>
 <p>
 <a href="/">Main</a> >
 <a href="/products/">Products</a> >
 <a href="/products/dishwashers/">Dishwashers</a> >
 <a>Second hand</a>
 </p>
 <p>
 <a href="/">Main</a> >
 <a href="/second-hand/">Second hand</a> >
 <a>Dishwashers</a>
 </p>
</nav>

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

<style>
@media screen, print, handheld, tv {
 /* should be ignored by non-visual browsers */
 .tag-cloud > li > span { display: none; }
 .tag-cloud > li { display: inline; }
 .tag-cloud-1 { font-size: 0.7em; }
 .tag-cloud-2 { font-size: 0.9em; }
 .tag-cloud-3 { font-size: 1.1em; }
 .tag-cloud-4 { font-size: 1.3em; }
 .tag-cloud-5 { font-size: 1.5em; }
}
</style>
...
<ul class="tag-cloud">
 <li class="tag-cloud-4"><a title="28 instances" href="/t/apple">apple</a> <span>(popular)</span>
 <li class="tag-cloud-2"><a title="6 instances" href="/t/kiwi">kiwi</a> <span>(rare)</span>
 <li class="tag-cloud-5"><a title="41 instances" href="/t/pear">pear</a> <span>(very popular)</span>
</ul>

The actual frequency of each tag is given using the title 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 element is used (rather than ol ) 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 rel -keyword is not used on these a elements because they do not represent tags that apply to the page itself; they are just part of an index listing the tags themselves.

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

<p> Costello: Look, you gotta first baseman?
<p> Abbott: Certainly.
<p> Costello: Who's playing first?
<p> Abbott: That's right.
<p> Costello becomes exasperated.
<p> Costello: When you pay off the first baseman every month, who gets the money?
<p> Abbott: Every dollar of it.

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

<p> <time>14:22</time> <b>egof</b> I'm not that nerdy, I've only seen 30% of the star trek episodes
<p> <time>14:23</time> <b>kaj</b> if you know what percentage of the star trek episodes you have seen, you are inarguably nerdy
<p> <time>14:23</time> <b>egof</b> it's unarguably
<p> <time>14:23</time> <i>* kaj blinks</i>
<p> <time>14:24</time> <b>kaj</b> you are not helping your case

In this example, two parts of a dialogue are annotated with footnote-like content using the title attribute.

<p> <b>Customer</b>: Hello! I wish to register a complaint. Hello. Miss?
<p> <b>Shopkeeper</b>: <span title="Colloquial pronunciation of 'What do you'"
>Watcha</span> mean, miss?
<p> <b>Customer</b>: Uh, I'm sorry, I have a cold. I wish to make a complaint.
<p> <b>Shopkeeper</b>: Sorry, <span title="This is, of course, a lie.">we're
closing for lunch</span>.

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.

<p> Announcer: Number 16: The <i>hand</i>.
<p> 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 <em>do</em> you
contradict people?
<p> Norman: I don't. <sup><a href="#fn1" id="r1">[1]</a></sup>
<p> Interviewer: You told me you did!
...
<section>
 <p id="fn1"><a href="#r1">[1]</a> 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.</p>
</section>

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

<p> <span class="speaker">Customer</span>: I will not buy this record, it is scratched.
<p> <span class="speaker">Shopkeeper</span>: I'm sorry?
<p> <span class="speaker">Customer</span>: I will not buy this record, it is scratched.
<p> <span class="speaker">Shopkeeper</span>: No no no, this's'a tobacconist's.
<aside>
 <p>In 1970, the British Empire lay in ruins, and foreign
 nationalists frequented the streets — many of them Hungarians
 (not the streets — the foreign nationals). Sadly, Alexander
 Yalt has been publishing incompetently-written phrase books.
</aside>

In this example, a table has cells with footnotes that are given in prose. A figure element is used to give a single legend to the combination of the table and its footnotes.

<figure>
 <figcaption>Table 1. Alternative activities for knights.</figcaption>
 <table>
 <tr>
 <th> Activity
 <th> Location
 <th> Cost
 <tr>
 <td> Dance
 <td> Wherever possible
 <td> £0<sup><a href="#fn1">1</a></sup>
 <tr>
 <td> Routines, chorus scenes<sup><a href="#fn2">2</a></sup>
 <td> Undisclosed
 <td> Undisclosed
 <tr>
 <td> Dining<sup><a href="#fn3">3</a></sup>
 <td> Camelot
 <td> Cost of ham, jam, and spam<sup><a href="#fn4">4</a></sup>
 </table>
 <p id="fn1">1. Assumed.</p>
 <p id="fn2">2. Footwork impeccable.</p>
 <p id="fn3">3. Quality described as "well".</p>
 <p id="fn4">4. A lot.</p>
</figure>

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 as ASCII case-insensitive.

Classes from the class 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 attribute on ol 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 elements that have an href attribute, all area elements that have an href attribute, and all link elements that have an href attribute, must match one of :link and :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 pseudo-class is defined to match an element while an element is being activated by the user. For the purposes of defining the :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 elements that have an href attribute
  • area elements that have an href attribute
  • link elements that have an href attribute
  • button elements that are not disabled
  • input elements whose type attribute is in the Submit Button, Image Button, Reset Button, or Button state
  • command elements that do not have a disabled attribute
  • elements that are specially focusable

  For example, if the user is using a keyboard to push a button 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 pseudo-class.

:enabled

The :enabled pseudo-class must match any element falling into one of the following categories:

• a elements that have an href attribute
• area elements that have an href attribute
• link elements that have an href attribute
• button elements that are not disabled
• input elements whose type attribute are not in the Hidden state and that are not disabled
• select elements that are not disabled
• textarea elements that are not disabled
• optgroup elements that are not disabled
• option elements that are not disabled
• command elements that do not have a disabled attribute
• li elements that are children of menu 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 elements that do not have a disabled attribute

:disabled

The :disabled pseudo-class must match any element falling into one of the following categories:

• button elements that are disabled
• input elements whose type attribute are not in the Hidden state and that are disabled
• select elements that are disabled
• textarea elements that are disabled
• optgroup elements that are disabled
• option elements that are disabled
• command elements that have a disabled attribute
• li elements that are children of menu elements, and that have a child element that defines a command, if the first such element's Disabled State facet is true (disabled)
• fieldset elements that have a disabled attribute

:checked

The :checked pseudo-class must match any element falling into one of the following categories:

• input elements whose type attribute is in the Checkbox state and whose checkedness state is true
• input elements whose type attribute is in the Radio Button state and whose checkedness state is true
• option elements whose selectedness is true
• command elements whose type attribute is in the Checkbox state and that have a checked attribute
• command elements whose type attribute is in the Radio state and that have a checked attribute

:indeterminate

The :indeterminate pseudo-class must match any element falling into one of the following categories:

• input elements whose type attribute is in the Checkbox state and whose indeterminate IDL attribute is set to true
• progress elements with no value content attribute

:default

The :default pseudo-class must match any element falling into one of the following categories:

• button elements that are their form's default button
• input elements whose type attribute is in the Submit Button or Image Button state, and that are their form's default button
• input elements to which the checked attribute applies and that have a checked attribute
• option elements that have a selected attribute

:valid

The :valid pseudo-class must match all elements that are candidates for constraint validation and that satisfy their constraints.

:invalid

The :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 pseudo-class must match all elements that are candidates for constraint validation, have range limitations, and that are neither suffering from an underflow nor suffering from an overflow.

:out-of-range

The :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 or suffering from an overflow.

:required

The :required pseudo-class must match any element falling into one of the following categories:

• input elements that are required
• select elements that have a required attribute
• textarea elements that have a required attribute

:optional

The :optional pseudo-class must match any element falling into one of the following categories:

• input elements to which the required attribute applies that are not required
• select elements that do not have a required attribute
• textarea elements that do not have a required attribute

:read-only

:read-write

The :read-write pseudo-class must match any element falling into one of the following categories:

• input elements to which the readonly attribute applies, but that are not immutable (i.e. that do not have the readonly attribute specified and that are not disabled)
• textarea elements that do not have a readonly attribute, and that are not disabled
• elements that are editable and are neither input elemenst nor textarea elements

The :read-only pseudo-class must match all other HTML elements.

:ltr

The :ltr pseudo-class must match all elements whose directionality is 'ltr'.

:rtl

The :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]