Identifying the purpose of a link using link text combined with the preceding heading element

ID: H80

Technology: html

Type: Technique

When to Use

HTML and XHTML

Description

The objective of this technique is to describe the purpose of a link from the context provided by its heading context. The preceding heading provides context for an otherwise unclear link. The description lets a user distinguish this link from links in the Web page that lead to other destinations and helps the user determine whether to follow the link.

Whenever possible, provide link text that identifies the purpose of the link without needing additional context.

Examples

Blocks of information on hotels

The information for each hotel consists of the hotel name, a description and a series of links to a map, photos, directions, guest reviews and a booking form.

<h2><a href="royal_palm_hotel.html">Royal Palm Hotel</a></h2>
  <ul class="horizontal">
    <li><a href="royal_palm_hotel_map.html">Map</a></li>
    <li><a href="royal_palm_hotel_photos.html">Photos</a></li>
    <li><a href="hroyal_palm_hotel_directions.html">Directions</a></li>
    <li><a href="royal_palm_hotel_reviews.html">Guest reviews</a></li>
    <li><a href="royal_palm_hotel_book.html">Book now</a></li>
  </ul>

<h2><a href="hotel_three_rivers.html">Hotel Three Rivers</a></h2>
  <ul class="horizontal">
    <li><a href="hotel_three_rivers_map.html">Map</a></li>
    <li><a href="hotel_three_rivers_photos.html">Photos</a></li>
    <li><a href="hotel_three_rivers_directions.html">Directions</a></li>
    <li><a href="hotel_three_rivers_reviews.html">Guest reviews</a></li>
    <li><a href="hotel_three_rivers_book.html">Book now</a></li>
  </ul>

A document provided in three formats

<h2>Annual Report 2006-2007</h2>
<p> 
  <a href="annrep0607.html">(HTML)</a>&nbsp;
  <a href="annrep0607.pdf">(PDF)</a>&nbsp;
  <a href="annrep0607.rtf">(RTF)</a>
</p>

Newspaper Web site

<div class="card-link">
   <h2><a href="Stockmarket_05052007.htm>Stock market soars as bullishness prevails</a></h2>
   <p>this week was a stellar week for the stock market as investing in gold rose 2%. 
</div>

A script is used to find each element with a class of card-link and append a "Read more" link at the end of the box (after the paragraph) that goes to the same location as the link in the heading.

Tests

Procedure

For each link in the content that uses this technique:

  1. Find the heading element that precedes the link
  2. Check that the text of the link combined with the text of that heading describes the purpose of the link.

Expected Results

Resources