HTML Hyperlinks Anchor Links

Jan
5

A hyperlink is a link to any resource on the Web: a HTML page, an image, a sound file, a movie, etc. An anchor is a hyperlink to a specific location within a document. The HTML anchor element <a>, is used to define both hyperlinks and anchors. A hyperlink is also used to create email links. The <a> tag uses the href="" or href="mailto:" attribute, and always the title="" attribute. The title attribute describes the link. In most samples below the first sample is an absolute URL, and the second is a relative URL.

Link to a Web Page

1 2	<a href="http://www.domain.com/" title="Our Site Name">Home</a> <a href="default.htm" title="Our Site Name">Home</a>

Link to a Graphic

1 2	<a href="http://www.domain.com/images/ourlogo.jpg" title="Logo">Our Company</a> <a href="directoryname/ourlogo.jpg" title="Logo">Our Company</a>

Anchor to Specific Location on the Same Web Page

1	<a href="#shipping" title="Shipping Policies">Shipping Policies</a>

Anchor to a Specific Location on Another Web Page

1 2	<a href="http://www.domain.com/policies.htm#shipping" title="Shipping">Shipping Policies</a> <a href="policies.htm#shipping" title="Shipping">Shipping Policies</a>

When using anchor links, you will need to include the id="" element at the beginning of the section you are linking to. If a browser cannot find a named anchor that has been specified, it goes to the top of the document. No error occurs.

1	<p id="shipping">Your policies are in this section somewhere on the web page.</p>

Email Link

1	<a href="mailto:yourname@yourdomain.com" title="Contact">Contact Us</a>

Image Link

1
2

<a href="http://www.domain.com/" title="Our Site"><img src="http://www.domain.com/img/ourlogo.jpg" alt="Our Site"></a>
<a href="default.htm" title="Our Site"><img src="img/ourlogo.jpg" alt="Our Site"></a>

Opening a Web Page in a New Window

Sometimes you may want a link to open in a new window so that your viewer can have access to additional information without leaving your site. For your site to validate as HTML 4.01 Strict, you must use inline Javascript. The deprecated attribute target="" in HTML 4.01 Strict returns in XHTML 1.0 Transitional.

1	<a href="http://www.domain.com/" title="New Page" onclick="window.open(this.href);return false">Visit this page in a new window.</a></p>

Always add a trailing slash to sub folder references. If you link like this: href="http://www.yourdomain.com", 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.yourdomain.com/". A URL cannot contain drive letters (a link from your computer), since an URL is a file located on the Web, something like "C:\\www\web\pics\" will not work.

Top