HTML Links

A link or hyperlink is a connection from one web resource to another.

HTML Links (Hyperlinks or Web links)

Links allow users to move seamlessly from one page to another, on any server anywhere in the world. A link has two ends called anchors and a direction. The link starts at the source anchor and points to the destination anchor, which may be any web resource (e.g. an image, an audio or video clip, an HTML document or an element within the document itself, etc.).

By default, links will appear as follows in most of the browsers:

  • An unvisited link is underlined and blue.
  • A visited link is underlined and purple.
  • An active link is underlined and red.

However you can overwrite this using CSS. Learn more about styling links.

HTML Link Syntax

Links are specified in HTML using the <a> tag.

A link or hyperlink could be a word, group of words, or image.

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

The href attribute in source anchor specifies the address of the destination anchor.

  • <a href="http://www.tutorialrepublic.com/">Tutorial Republic</a>
  • <a href="kites.jpg"><img src="kites-thumb.jpg" alt="kites"></a>
  • <a href="http://www.google.com/">Google Search</a>

The Target Attribute of Links

Target attribute tells the browser where to open linked document. There are four defined targets. Each target starts with an underscore(_): _blank, _parent, _self, _top.

  • <a href="http://www.tutorialrepublic.com/" target="_top">Tutorial Republic</a>
  • <a href="sky.jpg" target="_self"><img src="sky-thumb.jpg" alt="Cloudy Sky"></a>
  • <a href="http://www.google.com/" target="_blank">Google</a>

Creating Bookmark Anchors

The id attribute is used to create a bookmark inside a web page in the following way.

  • <a href="#balloons"><img src="balloons-thumb.jpg" alt="Balloons"></a>
  • <img src="balloons.jpg" alt="Hot Air Balloons" id="balloons">

The same effect can also be achieved by the name attribute by following way.

  • <a href="#ballons"><img src="balloons-thumb.jpg" alt="Balloons"></a>
  • <img src="balloons.jpg" alt="Hot Air Balloons" name="balloons">
 

Note:The HTML5 standard suggests using the id attribute instead of the name attribute for specifying the name of an anchor.


Creating Download Links

Placing files available for download is done in exactly the same fashion as placing text links, just point the destination URL to the file you want to be available for download.

In this case it is a Zip file called test.zip.

  • <a href="downloads/test.zip">Download Zip file</a>
  • <a href="downloads/masters.pdf">Download PDF file</a>
  • <a href="downloads/sample.jpg">Download Image file</a>
 

Note:Clicking a link that points to a PDF file or Image file will not cause it to download to your hard drive directly. It will only open the file in your web browser. Further you can save it to your hard drive.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.