--- tags: HTML4 SPEC --- # Section 12: Links - [document link](https://www.w3.org/TR/html401/struct/links.html) ## Introduction to links and anchors - This section introduces the link (or hyperlink, or Web link), the basic hypertext construct. A link is a connection from one Web resource to another. - A link has two **ends** (also called **anchors**) and a direction. **The link starts at the "source" anchor and points to the "destination" anchor**, which may be any Web resource (e.g., an image, a video clip, a sound bite, a program, an HTML document, an element within an HTML document, etc.). ## 12.1.1 Visiting a linked resource - The default behavior associated with a link is the **retrieval of another Web resource.** - This behavior is commonly and implicitly obtained by selecting the link (e.g., by clicking, through keyboard input, etc.). ``` <BODY> ...some text... <P>You'll find a lot more in <A href="chapter2.html">chapter two</A>. See also this <A href="../images/forest.gif">map of the enchanted forest.</A> </BODY> ``` - The **`href`** attribute in each source anchor **specifies the address of the destination anchor** with a URI. - The destination anchor of a link may be an element within an HTML document. - two ways to achieve it: 1. by the `A` element (naming it with the `name` attribute) 2. by any other element (naming with the `id` attribute). ``` <!-- example for first way --> <H1>Table of Contents</H1> <P><A href="#section1">Introduction</A><BR> <A href="#section2">Some background</A><BR> <A href="#section2.1">On a more personal note</A><BR> ...the rest of the table of contents... ...the document body... <H2><A name="section1">Introduction</A></H2> ...section 1... <H2><A name="section2">Some background</A></H2> ...section 2... <H3><A name="section2.1">On a more personal note</A></H3> ...section 2.1... ``` ``` <!-- example for second way --> <H1>Table of Contents</H1> <P><A href="#section1">Introduction</A><BR> <A href="#section2">Some background</A><BR> <A href="#section2.1">On a more personal note</A><BR> ...the rest of the table of contents... ...the document body... <H2 id="section1">Introduction</H2> ...section 1... <H2 id="section2">Some background</H2> ...section 2... <H3 id="section2.1">On a more personal note</H3> ...section 2.1... ``` ## 12.1.2 Other link relationships - Authors may insert links in their documents that express other relationships between resources. Links that express other types of relationships have one or more [link types](https://www.w3.org/TR/html401/types.html#type-links) specified in their source anchor. - The roles of a link defined by `A` or `LINK` are specified via the `rel` and `rev` attributes. ``` <HEAD> ...other head information... <TITLE>Chapter 5</TITLE> <LINK rel="prev" href="chapter4.html"> <LINK rel="next" href="chapter6.html"> </HEAD> ``` ## 12.1.3 Specifying anchors and links - The `LINK` element may only appear in the head of a document. The A element may only appear in the body. - When the `A` element's `href` attribute is set, **the element defines a source anchor for a link** that may be activated by the user to retrieve a Web resource. - The source anchor is the location of the `A` instance and the destination anchor is the Web resource. - The retrieved resource may be handled by the user agent in several ways: - by opening a new HTML document in the same user agent window - opening a new HTML document in a different window - starting a new program to handle the resource, etc. ## 12.1.4 Link titles - The `title` attribute may be set for both `A` and `LINK` to add information about the nature of a link. This information may be spoken by a user agent, rendered as a tool tip, cause a change in cursor image, etc. ## 12.1.5 Internationalization and links (adding) - the A and LINK elements support the charset attribute. This attribute allows authors to advise user agents about the encoding of data at the other end of the link. ## 12.2 The A element ``` <!ELEMENT A - - (%inline;)* -(A) -- anchor --> <!ATTLIST A %attrs; -- %coreattrs, %i18n, %events -- charset %Charset; #IMPLIED -- char encoding of linked resource -- type %ContentType; #IMPLIED -- advisory content type -- name CDATA #IMPLIED -- named link end -- href %URI; #IMPLIED -- URI for linked resource -- hreflang %LanguageCode; #IMPLIED -- language code -- rel %LinkTypes; #IMPLIED -- forward link types -- rev %LinkTypes; #IMPLIED -- reverse link types -- accesskey %Character; #IMPLIED -- accessibility key character -- shape %Shape; rect -- for use with client-side image maps -- coords %Coords; #IMPLIED -- for use with client-side image maps -- tabindex NUMBER #IMPLIED -- position in tabbing order -- onfocus %Script; #IMPLIED -- the element got the focus -- onblur %Script; #IMPLIED -- the element lost the focus -- > ``` - Start tag: **required**, End tag: **required** - Attribute definitions - name = cdata [CS] - This attribute **names the current anchor** so that it may be the destination of another link. The value of this attribute must be a unique anchor name. The scope of this name is the current document. - href = uri [CT] - specify the location of a Web resource, thus defining a link between the current element (the source anchor) and the destination anchor - hreflang = langcode [CI] - specify the base language of the resource designated by href and may only be used when href is specified. - type = [content-type](https://www.w3.org/TR/html401/types.html#type-content-type) [CI] - gives an advisory hint as to the content type of the content available at the link target address. It allows user agents to opt to use a fallback mechanism rather than fetch the content if they are advised that they will get content in a content type they do not support. - rel = link-types [CI] - describe the relationship from the current document to the anchor specified by the href attribute. The value of this attribute is a space-separated list of link types. - rev = link-types [CI] - describe a reverse link from the anchor specified by the href attribute to the current document. The value of this attribute is a space-separated list of link types. - charset = charset [CI] - specify the character encoding of the resource designated by the link. - Attributes defined elsewhere * id, class (document-wide identifiers) * lang (language information), dir (text direction) * title (element title) * target (target frame information) * tabindex (tabbing navigation) * ... - Examples: 1. the `A` element defines a link. The source anchor is the text **"W3C Web site"** and the destination anchor is "http://www.w3.org/" ``` For more information about W3C, please consult the <A href="http://www.w3.org/">W3C Web site</A>. ``` 2. To tell user agents what the character encoding of the destination page is, set the `charset` attribute: ``` For more information about W3C, please consult the <A href="http://www.w3.org/" charset="ISO-8859-1">W3C Web site</A> ``` 3. Link a defined anchor from the same or another document - first, define a anchor named "**anchor-one**" in the file "**one.html**". ``` <!-- in "one.html" --> ...text before the anchor... <A name="anchor-one">This is the location of anchor one.</A> ...text after the anchor... ``` - then, a link defined in the file "**two.html**" in the same directory as "one.html" would refer to the anchor ``` <!-- in "two.html" --> ...text before the link... For more information, please consult <A href="./one.html#anchor-one"> anchor one</A>. ...text after the link... ``` - How to? - URIs that designate anchors contain a **"#"** character followed by the anchor name (the fragment identifier). Here are some examples of such URIs: * An absolute URI: http://www.mycompany.com/one.html#anchor-one * A relative URI: ./one.html#anchor-one or one.html#anchor-one * When the link is defined in the **same** document: #anchor-one ### 12.2.1 Syntax of anchor names - An anchor name is the value of either the `name` or `id` attribute. Anchor names **must** observe the following rules: - **Uniqueness**: Anchor names must be unique within a document. **Anchor names that differ only in case may not appear in the same document.** - **String matching**: Comparisons between fragment identifiers and anchor names must be done by exact (case-sensitive) match. - Legal example: ``` <P><A href="#abc">...</A> ...more document... <P><A name="abc">...</A> ``` - Illegal example: ``` <P><A name="abc">...</A> <P><A name="ABC">...</A> ``` ### 12.2.2 Nested links are **illegal** - Links and anchors defined by the `A` element must not be nested; an `A` element must not contain any other A elements. - Since the DTD defines the `LINK` element to be empty, `LINK` elements may not be nested either. ### 12.2.3 Anchors with the `id` attribute - The `id` attribute may be used to create an anchor at the start tag of any element (including the A element). - create an anchor in an H2 element. And it is linked to via the A element. ``` You may read more about this in <A href="#section2">Section Two</A>. ...later in the document <H2 id="section2">Section Two</H2> ...later in the document <P>Please refer to <A href="#section2">Section Two</A> above for more details. ``` #### NOTE - The `id` and `name` attributes share the same name space. This means that **they cannot both define an anchor with the same name in the same document.** Like this: ``` <A href="#a1">...</A> ... <H1 id="a1"> ...pages and pages... <A name="a1"></A> ``` - It is permissible to use both attributes to specify an element's unique identifier for the following elements: `A`, `APPLET`, `FORM`, `FRAME`, `IFRAME`,`IMG`, and `MAP`. **When both attributes are used on a single element, their values must be identical.** ``` <P><A name="a1" id="a1" href="#a1">...</A> ``` - Because of its specification in the HTML DTD, the `name` attribute may contain [**character references**](https://www.w3.org/TR/html401/charset.html#entities). Thus, the value **D&#xfc;rst** is a valid name attribute value, as is **D&uuml;rst** . The `id` attribute, on the other hand, may not contain character references. #### Use id or name? - Authors should consider the following issues when deciding whether to use id or name for an anchor name: * The `id` attribute can act as more than just an anchor name (e.g., style sheet selector, processing identifier, etc.). * Some older user agents don't support anchors created with the `id` attribute. * The `name` attribute allows richer anchor names (with entities). ### 12.2.4 Unavailable and unidentifiable resources - A reference to an unavailable or unidentifiable resource is an error. - If a user agent cannot locate a linked resource, it should alert the user. - If a user agent cannot identify the type of a linked resource, it should still attempt to process it. It should alert the user and may allow the user to intervene and identify the document type. ## 12.3 Document relationships: the LINK element ``` <!ELEMENT LINK - O EMPTY -- a media-independent link --> <!ATTLIST LINK %attrs; -- %coreattrs, %i18n, %events -- charset %Charset; #IMPLIED -- char encoding of linked resource -- href %URI; #IMPLIED -- URI for linked resource -- hreflang %LanguageCode; #IMPLIED -- language code -- type %ContentType; #IMPLIED -- advisory content type -- rel %LinkTypes; #IMPLIED -- forward link types -- rev %LinkTypes; #IMPLIED -- reverse link types -- media %MediaDesc; #IMPLIED -- for rendering on these media -- > ``` - Start tag: **required**, End tag: **forbidden** - This element defines a link. Unlike `A`, it may **only appear in the `HEAD` section of a document**, although it may appear any number of times. Although `LINK` has no content, it **conveys relationship information** that may be rendered by user agents in a variety of ways (e.g., a tool-bar with a drop-down menu of links). ``` <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Chapter 2</TITLE> <LINK rel="Index" href="../index.html"> <LINK rel="Next" href="Chapter3.html"> <LINK rel="Prev" href="Chapter1.html"> </HEAD> ...the rest of the document... ``` ### 12.3.1 Forward and reverse links - the `rel` attribute specifies a **forward link** and the `rev` attribute specifies a **reverse link**. - Consider two documents A and B. Document A: `<LINK href="docB" rel="foo">` Has exactly the same meaning as: Document B: `<LINK href="docA" rev="foo">` **Both attributes may be specified simultaneously.** ### 12.3.2 Links and external style sheets - When the LINK element links an external style sheet to a document, the `type` attribute specifies the style sheet language and the `media` attribute specifies the intended rendering medium or media. User agents may save time by retrieving from the network only those style sheets that apply to the current device. ### 12.3.3 Links and search engines - Authors may use the `LINK` element to **provide a variety of information to search engines**, including: * Links to alternate versions of a document, written in another human language. * Links to alternate versions of a document, designed for different media, for instance a version especially suited for printing. * Links to the starting page of a collection of documents. #### Examples 1. The examples below illustrate how language information, media types, and link types may be combined to improve document handling by search engines. - the `hreflang` attribute to tell search engines where to find Dutch, Portuguese, and Arabic versions of a document. - the `charset` attribute for the Arabic manual. - the `lang` attribute to indicate that the value of the `title` attribute for the `LINK` element designating the French manual is in French. ``` <HEAD> <TITLE>The manual in English</TITLE> <LINK title="The manual in Dutch" type="text/html" rel="alternate" hreflang="nl" href="http://someplace.com/manual/dutch.html"> <LINK title="The manual in Portuguese" type="text/html" rel="alternate" hreflang="pt" href="http://someplace.com/manual/portuguese.html"> <LINK title="The manual in Arabic" type="text/html" rel="alternate" charset="ISO-8859-6" hreflang="ar" href="http://someplace.com/manual/arabic.html"> <LINK lang="fr" title="La documentation en Fran&ccedil;ais" type="text/html" rel="alternate" hreflang="fr" href="http://someplace.com/manual/french.html"> </HEAD> ``` 2. In the following example, we tell search engines where to find the printed version of a manual. ``` <HEAD> <TITLE>Reference manual</TITLE> <LINK media="print" title="The manual in postscript" type="application/postscript" rel="alternate" href="http://someplace.com/manual/postscript.ps"> </HEAD> ``` 3. we tell search engines where to find the front page of a collection of documents. ``` <HEAD> <TITLE>Reference manual -- Page 5</TITLE> <LINK rel="Start" title="The first page of the manual" type="text/html" href="http://someplace.com/manual/start.html"> </HEAD> ``` ## 12.4 Path information: the `BASE` element ``` <!ELEMENT BASE - O EMPTY -- document base URI --> <!ATTLIST BASE href %URI; #REQUIRED -- URI that acts as base URI -- > ``` - Start tag: **required**, End tag: **forbidden** - In HTML, links and references to external images are always specified by a URI. **Relative URIs are resolved according to a base URI**, which may come from a variety of sources. **The `BASE` element allows authors to specify a document's base URI explicitly.** - When present, the `BASE` element must appear in the `HEAD` section of an HTML document, before any element that refers to an external source. There can be only one <base> element in a document. - For example, given the following `BASE` declaration and `A` declaration: ``` <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Our Products</TITLE> <BASE href="http://www.aviary.com/products/intro.html"> </HEAD> <BODY> <P>Have you seen our <A href="../cages/birds.gif">Bird Cages</A>? </BODY> </HTML> ``` - the relative URI "../cages/birds.gif" would resolve to: "http://www.aviary.com/cages/birds.gif" - more information about [<base>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) ## 12.4.1 Resolving relative URIs - User agents must calculate the base URI according to the following precedences (highest priority to lowest): 1. The base URI is set by the BASE element. 2. The base URI is given by meta data discovered during a protocol interaction, such as an HTTP header (see [RFC2616]). 3. By default, the base URI is that of the current document. Not all HTML documents have a base URI (e.g., a valid HTML document may appear in an email and may not be designated by a URI). Such HTML documents are considered erroneous if they contain relative URIs and rely on a default base URI.