A key feature of the web is the ability to connect (hyperlink or ‘link’) resources, including webpages, media files (images, video, etc.) and programs.
A hyperlink can be made from a document to:
Both the source and the destination of a link are referred to as anchors.
A source anchor is created in an HTML document (webpage) by adding an anchor element (
<a>) with a hypertext reference (
href) containing a uniform resource identifier (URI).
Using the code for a link to the Motive homepage as an example:
This glossary is compiled by
A destination anchor is often referred to by users as a ‘jump-to link’. In FrontPage it is called a ‘Bookmark’ and in Dreamweaver, it is a ‘Named anchor’.
To link to a point within a webpage, for example to link to content below the first fold, a destination anchor must be added.
A destination anchor is created by adding a fragment identifier, this is either:
|Hyperlink||Element||Destination anchor code||Source anchor code|
To ensure compatibility with future specifications, e.g. XHTML, it is recommended to include both the
id attributes in
<a> element destination anchors.
If creating an destination anchor to scroll to the top of the current page, be advised that some browsers  appear to ‘assume’ a
#top anchor (not visible in the page source code). As implementation of this feature appears inconsistent, it is preferable to insert a
#pagetop destination anchor instead:
<a name="pagetop" id="pagetop"></a>.
In Internet Explorer (IE), you can move between the address bar, source anchors and input controls (such as textfields) using the
Each time the
Tab key is pressed, the focus (location of the cursor) moves to the next active element. Once focus is on a source anchor, it can be activated by pressing the
In IE 5.5 and 6 (depending on the markup used), the keyboard cannot be used to move between anchors on the same page. This is a consideration when links are provided to skip navigation or jump to key points in the page content.
The behaviour of the browser is as follows:
Tabkey shifts focus to a source anchor
Enterkey scrolls/jumps the webpage to the destination anchor
Tabagain (unconventionally) shifts focus to the first source anchor on the page (and not to the next active element after the destination anchor)
The IE bug appears to be triggered by:
<span>containing the destination anchor has no explicit
Unfortunately, table-less layout is a significant feature of standards compliant markup (in this approach to markup, tables are reserved for tabular data such as statistics).
|Place source and destination anchors in separate
The source and destination anchors must be in separate
Setting an explicit
|Add an empty
||The focus may ‘disappear’ when tabbing to an empty anchor (as there is no anchor text), i.e. the
|Enclose heading text in a destination anchor, with an
As all destination anchors will also be source anchors, headings will be underlined, show a hover state, etc. (This can be modified through the use of appropriate CSS selectors.)
Enclosing heading text inside an
If the page is accessed using a screen reader, the heading text may be declared as both a heading and a link? (Unconfirmed, conducting further research, advice welcome).
idvalues and CSS
In addition to creating identifier fragments, the
id attribute is also used in the Cascading Style Sheets specification (CSS) as a
id values must conform to both the X(HTML) and CSS specifications.
idvalues must be unique within any one document, i.e. the same value should not be used for more than one element, however an element may have the same value for both
idattributes to identify fragments . For the purposes of backward compatibility, use the same value for both the
idattributes. For example:
<a name="pagetop" id="pagetop"></a>.This avoids potential complications with older (typically version 4) browsers not recognising the
nameattribute of the
<a>element is deprecated in the XHTML specification and is to be deleted from future XHTML specifications 
idvalues (e.g. ‘content’, ‘pagetop’)
idvalues cannot start with a number
<a name="navSection" id="navSection"></a>,
<a name="navExternalLinks" id="navExternalLinks"></a>
#content, may not link to the destination anchor:
Thanks to Thierry Koblentz for quality-assuring this entry.
#topanchors (Paul Novitski, CSS-D)
tabindexattribute to destination anchors.
id. This bug is addressed by the solutions provided above.)