Dealing with Links


  1. Hyperlinks, Anchors, and Links
  2. An HTML Link
  3. The href Attribute
  4. The target Attribute
  5. The name Attribute
  6. Examples
  7. More Examples
  8. Useful Tips

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
Target Symbol

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>

My personal Icon


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.