Create a bidirectional hyperlink in HTML
Content |
Tested on |
Chrome (5, 12, 14) |
Firefox (1.0, 2.0, 3.0, 3.5, 3.6, 4, 7, 11) |
IE (6, 7, 9) |
Opera (11) |
Objective
To create a pair of HTML link anchors such that clicking on one navigates to the other and vice versa.
Scenario
Suppose that you want to create an HTML document that contains footnotes. Associated with each footnote are two markers of the form [n], one at the point in the text to which the footnote relates, and one next to the footnote itself.
You want to be able to click on the markers to navigate either from the text to the footnote or from the footnote back to the text.
Method
An outbound link in an HTML document is created by enclosing the link text within an anchor element that has an href
attribute:
<a href="#footnote1">[1]</a>
To use that same text as the destination of an inbound link it must be given a fragment name. This is done by placing it within an anchor element with a name
attribute:
<a name="footnoteref1">[1]</a>
Nested anchor elements are forbidden, but it is permissible to add both of the above attributes to the same element. If this is done then the content of the anchor element can act as both the origin and the destination of a link:
<a name="footnoteref1" href="#footnote1">[1]</a>
The anchor at the other end of the link should be of the same form but with the fragment names reversed:
<a name="footnote1" href="#footnoteref1">[1]</a>
Tags: html