The Motive Web Design Glossary

<a>, anchor/link

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:

• a different resource
  For example from a webpage to a Word document, or
• a location within the current document
  For example from a menu at the top of the page to a point somewhere else on the same webpage.

Both the source and the destination of a link are referred to as anchors.

Source 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 href="http://www.motive.co.nz">Motive</a>.

<a href="http://www.motive.co.nz">Motive</a>. \_________URI_________/ \_______href attribute_______/ \______________(source) anchor_____________/

Destination anchors

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:

• an anchor element, with a name attribute, or
• any other element, with an id attribute.

Hyperlink	Element	Destination anchor code	Source anchor code
Page top	<a>	<a name="pagetop"></a>	<a href="#pagetop"> Page top </a>
Content	<a>	<a name="content"></a>	<a href="#content"> Content </a>
Destination anchors	<h2>	<h2 id="destination"> Destination anchors </h2>	<a href="#destination"> Destination anchors </a>

To ensure compatibility with future specifications, e.g. XHTML, it is recommended to include both the name and id attributes in <a> element destination anchors.

Assumed #top anchor

If creating an destination anchor to scroll to the top of the current page, be advised that some browsers [1] 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>.

Keyboard navigation

In Internet Explorer (IE), you can move between the address bar, source anchors and input controls (such as textfields) using the Tab key.

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 Enter key.

Internet Explorer keyboard (‘tabbed’) navigation bug

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:

1. Pressing the Tab key shifts focus to a source anchor
2. Pressing the Enter key scrolls/jumps the webpage to the destination anchor
3. Pressing the Tab again (unconventionally) shifts focus to the first source anchor on the page (and not to the next active element after the destination anchor)

Bug conditions

The IE bug appears to be triggered by:

• table-less layout,
• where the source and destination anchors are not in separate <div>s (or <span>s), and
• the <div> or <span> containing the destination anchor has no explicit width.

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).

Solutions

Technique	Markup	Considerations
Place source and destination anchors in separate <div>s. Use CSS to set a width on the <div> containing the destination anchor.	<!-- HTML --> <a href="#dest">Source anchor</a> … <div class="container"> <a name="#dest" id="dest"></a> </div> /* CSS */ .container { width: 100%; }	The source and destination anchors must be in separate <div>s. Setting an explicit width on <div> elements may have some effect on page layout. The width can be any value except auto and inherit. The width rule can be set inline, in the style block (in the <head> of the document), or in an external stylesheet.
Add an empty href attribute to the destination anchor.	<a name="dest" id="dest "href="#"></a>	The focus may ‘disappear’ when tabbing to an empty anchor (as there is no anchor text), i.e. the Tab key must be pressed twice to move to the next active element.
Enclose heading text in a destination anchor, with an href value (matching the destination anchor name/id).	<h3> <a name="dest" id="dest" href="dest"> Destination heading </a> </h3>	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 <a> element enables users to bookmark and link to a specific point on a webpage (this can be invaluable when referencing blog comments). 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).

Naming anchors

Tips and best practices for name and id values

• name and id values 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 name and id attributes
• content authored to the XHTML 1.0 specification must use id attributes to identify fragments [2]. For the purposes of backward compatibility, use the same value for both the name and id attributes. For example: <a name="pagetop" id="pagetop"></a>. This avoids potential complications with older (typically version 4) browsers not recognising the id attribute [3].
• support for the name attribute of the <a> element is deprecated in the XHTML specification and is to be deleted from future XHTML specifications [4]
• reference either the content or context of the anchor when assigning name and id values (e.g. ‘content’, ‘pagetop’)
• short but still meaningful values should be preferred: this reduces filesize, decreases the potential for error when marking-up content and minimises wrapping of links when copied into an email
• prefer the use of a single word, set in lowercase (no spaces)
• id values cannot start with a number
• for multiple-word values, capitalise the first letter of the second and subsequent words (often referred to as ‘camel case’), for example:
  <a name="navSection" id="navSection"></a> ,
  <a name="navExternalLinks" id="navExternalLinks"></a>
• note that some browsers differentiate between upper and lowercase characters in attribute values, e.g. a source anchor with the URI: #content, may not link to the destination anchor: <a id="conTent"></a>
• do not include punctuation marks or symbols
• do not use underscores: although some browsers do permit their use, underscores are illegal in the both the CSS1 and CSS2 specifications

Related terms: hyperlink, link: absolute, relative, root, markup, URI, URL

Thanks to Thierry Koblentz for quality-assuring this entry.

References and further reading

• [1] Browser check for #top anchors (Paul Novitski, CSS-D)
  A list of the web browsers that assume a #top anchor.
• [2] XHTML 1.0: The elements with id and name attributes W3C
  • [3],[4] HTML Compatibility Guidelines: C8. Fragment Identifiers
• Back-to-top links considered harmful (Jukka Korpela, IT and Communication)
  Considerating the accessibility implications of duplicating browser-level functionality in-content.
• Footnotes (or endnotes) on webpages (Jukka Korpela, IT and Communication)
  Methods for marking-up references within text.
• Keyboard navigation and Internet Explorer (Gez Lemon, Juicy Studio)
  Additional method for combating the IE bug, by adding a tabindex attribute to destination anchors.
• Links in HTML documents (W3C)
• Skip navigation links (Jim Thatcher)
  Intrapage anchors are commonly used to bypass repetitive navigation blocks. (The table: Which link targets work where?, suggests that keyboard navigation is ineffective in IE, when the destination of a link is a heading with an id. This bug is addressed by the solutions provided above.)

Motive Web Design Glossary Trivia