contents introduction reference index
previous next
HTML 4 - User's Guide
HyperLinks - the A (Anchor) element
Contents:
- 1. SAMPLES
- 1.1 Link to an HTML document in the local host
- 1.2 Link to a location within a document
- 1.3 Link to a non-HTML document
- 1.4 Link to a document on the Internet
- 1.5 Link from a map
- 2. USAGE
- 3. SYNTAX
- 3.1 Hyperlink in the calling document
- 3.2 Destination location in the target document
- 3.3 Element attributes
Hyperlinks are the means through which a reader of a document can jump to another document, and then come back. From the first destination document, the reader can also jump to a further document, and then further, and so on. At a moment he can backtrack and return all the way back to the location he or she originally started from.
A hyperlink can also be designed to jump to a precise location of the destination document, or of the current document.
Appearance
When the mouse cursor hovers above a hyperlink, the related document's URI is generally displayed on the status bar (at the bottom of the screen).
A hyperlink is generally highlighted so as to make it easily recognizable.
Most often, it is underscored and set in blue characters before you clicked on it. After you have clicked, the color changes; the link is said to have been visited.
The appearance of hyperlinks, before and after they are visited, can be defined by properties in a CSS stylesheet.
1. SAMPLES
1.1 Link to an HTML document in the local host
The underlined sequence in the following example is how a hyperlink usually appears to you, with the present browser:
Hidden HTML code inserted in the text relates the underlined sequence to another page called the target page. By clicking on the hyperlink, you have the browser display that page. Please, try it.
The source text with the HTML markup is as follows, where HTML markups inserted to delimit the links are highlighted in blue:
Please click here to display an
excerpt from the "<A href="TEXTOfFrenchmen.html">Aventures of Huckleberry Finn"</A> by Mark Twain
The hyperlink sequence is comprised between the starting <A> and the ending </A> tags.
The href attribute specifies the URI of the target document. Here, it is document "TEXTOfFrenchmen.html" in the same directory as the document where the hyperlink is contained (i.e. the document you are browsing).
1.2 Link to a location within a document in the local host
In the previous example, when clicked, the hyperlink has the page displayed from the start. A hyperlink can also relate to a location within a page, as in the following example which shows no apparent difference from the above, but will act differently:
Please click on the undelined sequence to display the "Lotos-eaters" poem starting with a line within the text.
The source text is as follows:
This link gets you to a
<A href="TEXTLotosEaters.html#here"> line within the
"Lotos-eaters"</A> poem by Alfred Tennyson
The href attribute value in the start tag is composed of two parts:
| - | the first part, "TEXTLotos-eaters.html" is the URI of the target document
|
| - | the second part, "#here", refers to an <A> element with a name attribute, contained in the target document, as follows:
|
| "<A name="here"></A>
|
In the href attribute value, a "#" character is to be added ahead of the name "here" as defined in the target document.
When you click on the hyperlink, the related document will be displayed, starting at the line that contains the <A name="here"></A> markup.
1.3 Link to non-HTML document
The related document is not necessarily an HTML page. It can be an image file or a plain text file such as in the following example.
The men of the seventeenth and eighteenth centuries believed in the goodness
of
nature and were convinced that there existed a
state of nature that preceded
life in society.
The men of the seventeenth and eighteenth centuries believed in the goodness
of <a href="../Images/pond_2.jpg">nature</a> and were convinced that there existed
a <a href="../Docs/DOCLocke-1.txt">state of nature</a> that preceded life in society.
The first hyperlink refers to the "pond_2.jpg" image
The second hyperlink, to the "DOCLocke-1.txt" plain text document.
1.4 Link to an HTML document on the Internet
An example of a hyperlink to a document from the Internet is:
With some Internet providers, it is advisable that you manually connect to the Internet before clicking on the link.
The source text is:
Click here to link to the
<a href="http://www.w3.org/TR/html4/cover.html">HTML 4.01 Specification</a> document.
The URI defined by the href attribute identifies a document located at the site of the W3C organization.
1.5 Link from a MAP
Links are also used in MAP elements
2. USAGE
A hyperlink is a relation between a calling document and a target document or a location within the latter; in particular, a hyperlink can relate to a location within the calling document.
In the text body of the calling document, it is materialized as a text sequence generally highlighted in some way. When in a map it does not show. Either way, when the mouse cursor hovers over a hyperlink, the target document's URI is displayed on the browser status bar.
When the user clicks on the hyperlink, the browser displays the target document starting either at the beginning or at the specified location if any. In the latter case, the whole of the target is still available to the user who can go up to the beginning of the new document if desired.
A hyperlink is defined by
| - | a sequence of text enclosed in the content of an <A> element in a body of text or
| | - | an <AREA> or an <A> element the attributes of which define a geometric figure in a map.
|
3. SYNTAX
The A or anchor element defines a hyperlink in the calling document, or a location in the target document, if a link is desired to a specific location within the latter.
3.1 Hyperlink in the calling document
The <A> element to define the hyperlink is as follows:
<A href="location">
where location has 2 parts both of which are optional:
| - | the first part is the target document URI; if omitted, the target document is the document containing the hyperlink
| | - | the second part is the name of a location defined within the target document, preceded by a "#" sign
| | When the hyperlink is clicked, the target document is displayed
| |
| - | starting from the beginning if the location part is omitted
| | - | starting from the line containing the location definition, if the location part is present
|
| | Examples
| - link to a location named "target location" within the current document: <A href="#target location">
| - link to a location named "location" within another document: <A href="document.html#location">
- link to an Internet document: <A href="http://www.w3.org/TR/html4/index.html">
| |
3.2 Destination location in the target document
A location that can be referenced by a hyperlinked is defined by an <A> element with a name attribute:
<A name="locationName">
| | The location is where the <A> is inserted.
| | The name of the location is the value of the name attribute. This can include spaces
|
The <A> element can enclose a sequence of text, or it can be empty as in the following example.
Example
<A name="location of interest"></A>. The document can be displayed starting at this location
3.3 Element attributes
The A element has the common attributes, and the following attributes:
name | name="cdata" | Specifies the name of the location where the A element is used, which can be the target location of a hyperlink defined by an A element with the href attribute
| href | href="uri#location" | Specifies the target location
| type | type="contentType" | Content type of the targer document - this helps the user agent save on loading documents that it cannot process
| charset | charset="charset" | Encoding method of the link source
| hreflang | hreflang="langCode" | Code of the language of the target document
| rel | rel="linkType" | Forward link type of the target document
| rev | rev="linkType" | Reverse link type of the target document
| accesskey | accesskey="character" | Defines a one character access key for the element
| shape | shape="shape" | Defines the shape of the sensitive map associated with the elment.
| coords | coords="coordinates" | Defines the coordinates of the sentitive map associated withe the element
| tabindex | tabindex="integer" | Defines the rank of the element in a tabbing navigation
| onfocus | onfocus="script" | Specifies the script to be run when the element gets focus
| onblur | onblur="script" | Specifies the script to be run when the element loses focus
|
contents introduction reference index
previous next
|
