Hyperlinks, Anchors, and Links

In web terms, a hyperlink is a reference (an address) to a resource on the web.

Hyperlinks can point to any resource on the web: an HTML page, an image, a sound file, a movie, etc.

An anchor is a term used to define a hyperlink destination inside a document.

The HTML anchor element <a>, is used to define both hyperlinks and anchors.

We will use the term HTML link when the <a> element points to a resource,
and the term HTML anchor when the <a> elements defines an address inside a document..

An HTML Link

Link syntax:

        <a href="url"></a>

The start tag contains attributes about the link.

The element content (Link text) defines the part to be displayed.

Note: The element content doesn't have to be text. You can link from an image or any other HTML element.

The href Attribute

The href attribute defines the link "address".

This <a> element defines a link to my Blog:

        <a href="http://marcricblog.blogspot.com/">Visit my Blog</a>

The code above will display like this in a browser:

Visit my Blog!

The target Attribute

The target attribute defines where the linked document will be opened.

The code below will open the document in a new browser window:

        <a href="http://marcricblog.blogspot.com/"

        target="_blank">Visit my Blog!</a>

Visit my Blog!

The name Attribute

When the name attribute is used, the<a> element defines a named anchor inside a HTML document.

Named anchor are not displayed in any special way. They are invisible to the reader.

Named anchor syntax:

        <a name="label">Any content</a>

The link syntax to a named anchor:

        <a href="#label">Any content</a>

The # in the href attribute defines a link to a named anchor.

Examples:

A named anchor inside an HTML document:

        <a name="tips">Useful Tips Section</a>

A link to the Useful Tips Section from the same document:

        <a href="#tips">

        Jump to the Useful Tips Section</a>

A link to the Useful Tips Section from another document:

        <a href="http://www.w3schools.com/html_tutorial.htm#tips">

        Jump to the Useful Tips Section</a>

More Examples:

This example demonstrates how to use an image as a link.

        <a href="http://marcricblog.blogspot.com/">

        <img border="0" src="../files/marcricico.gif"

        width="70" height="76">
        </a>

This example demonstrates how to use a link to jump to another part of a document.

        <a href="#target">

        Link to a location on the same page</a>

Link to a location on the same page

This example demonstrates how to break out of a frame, if your site is locked in a frame.

        <a target="_top" href="HTML-page11.htm">

        Break out of a frame</a>

Break out of a frame

This example demonstrates how to link to a mail message (will only work if you have mail installed).

        <a href="mailto:someone@microsoft.com?subject=Hello%20again">

        Send Mail</a>

Send Mail

Note: Spaces between words should be replaced by %20 to ensure that the browser will display your text properly.

This example demonstrates a more complicated mailto link.

        <a href="mailto:someone@microsoft.com?

        cc=someoneelse@microsoft.com&

        bcc=andsomeoneelse2@microsoft.com&

        subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20party!">

        Send Complex Mail</a>

Send Complex Mail

Note: Spaces between words should be replaced by %20 to ensure that the browser will display your text properly.

Useful Tips

Always add a trailing slash to sub-folder references.

If you link like this: href="http://www.wikipedia.org", you will generate two HTTP requests to the server,
because the server will add a slash to the address and create a new request like this: href="http://www.wikipedia.org/".

Named anchors are often used to create "table of contents" at the beginning of a large document.

Each chapter within the document is given a named anchor, and links to each of these anchors are put at the top of the document.

If a browser cannot find a named anchor that has been specified, it goes to the top of the document. No error occurs.