Motive [Home].Glossary.

Guides

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:

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

‘Jump-to’

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
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:

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

id values and CSS

In addition to creating identifier fragments, the id attribute is also used in the Cascading Style Sheets specification (CSS) as a selector. Consequently, id values must conform to both the X(HTML) and CSS specifications.

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

Thanks to Thierry Koblentz for quality-assuring this entry.

References and further reading

 

Motive Web Design Glossary Trivia