The Web Wizard’s The Web Wizard’s Guide to HTMLGuide to HTML

Chapter FourAll About

Hyperlinks

Chapter ObjectivesChapter Objectives

Introduce three types of hyperlinksExplain how to add absolute URLsExplain how to add relative URLsExplain how to add named anchorsExamine the problem of link maintenance

Different Types of HyperlinksDifferent Types of Hyperlinks

Absolute URLs point to Web pages on other Web servers

Relative URLs point to Web pages on the same Web server

Named Anchors point to a different location on the current Web page

All Hyperlinks Have Two PartsAll Hyperlinks Have Two Parts

The Link Label is the visible element that the user points to and clicks (link labels can be text segments or images)

The Link Destination is the location that the link takes you to when you click on the link

Only the link destinations are handled differently for absolute URLs, relative URLs, and named anchors

Anchor Tags Anchor Tags

All hyperlinks are created with the anchor tag:

<a>this is a link label</a>

The href attribute is used to specify the link destination:

<a href=“destination.html”>

Absolute URLs Absolute URLs

All absolute URLs use complete URL addresses for their link destinations:

<a href=“http://www.umass.edu/”>UMass-Amherst</a>

Any Web page can be referenced by an absolute URL as long as you have its correct address

Relative URLs Relative URLs

A relative URL need only specify a file name for its link destination:

<a href=“treehouse.html”>tree houses</a>

This assumes the destination file is in the same directory as the HTML file containing the link

If the file is in a different directory, pathing information must be added to the href value

Named Anchors Named Anchors

A named link destination specifies a location that has been marked by an anchor tag with a name attribute

<a href=“#lumber”>Some Good Lumber</a>

<a name=“lumber”>some good lumber</a>

The href value is prefaced with the # character but the name value is not

Named Anchors Named Anchors Combined with Other Links Combined with Other Links

A named anchor can be added to an absolute or relative link as long as the destination being referenced contains that named anchor

<a href=“treehouse.html#lumber”>Some Good Lumber</a>

Just add a # followed by the anchor’s name to the end of the file name in the href value

Link Maintenance Link Maintenance

An absolute link that works today may not work tomorrow

Dead links frustrate visitors and detract from your Web pages

To keep all of your links operational, you have to test them periodically and update any that have died

Automated Link Checkers Automated Link Checkers

If you have a large number of links, you should automate the process of link testing

You can subscribe to a Web-based service for link testing and weekly or monthly link reports

You can obtain your own link testing software and run it yourself