Join us Now |  Forgot Password? | Forgot UserName?


Learn step by step

HTML Links

Web pages can contain links that can take you directly to other webpages or even specific parts of a given page. These links are known as hyperlinks.
Hyperlinks allow visitors to navigate between Web sites by clicking on titles, words, phrases, and images. Thus you can create hyperlinks using text or images on your web page.

Linking Documents - The <a> Element:

A link is specified using the <a> element. This element is also called as anchor tag. Anything between the opening <a> tag and the closing </a> tag becomes text part of the link and on click it would route the user to destination link.
Following is the simple syntax to use this tag.

<a href="Document URL" attr_name="attr_value"...more attributes />
Anchor Attributes:

Following are most frequently used attributes for <a> tag.

  • href:specifies the target URL of a hyperlink. Its value can be any valid document URL (absolute or relative), including a fragment identifier or a JavaScript code fragment.
  • target:specify where to show the contents of a selected hyperlink. If set to "_blank" then it would open a new window to display the loaded page, if set to "_top" or "_parent" then same window will be used to display the loaded document but it would be positioned, if set to "_self" then it would load the new page in the current window. By default its "_self".
  • name & id:attributes places a label within a document. When that label is used in a link to that document, it is the equivalent of telling the browser to goto that label.
  • event: attributes like onClick, onMouseOver etc. are used to trigger any Javascript or VBscript code.
  • title:attribute lets you specify a title for the document to which you are linking. The value of the attribute is any string, enclosed in quotation marks. The browser might use it as a mouseover tooltip.
  • accesskey:attribute provides a keyboard shortcut that can be used to activate a link. For example, you could make the P key an access key so that when the user presses either the Alt or Ctrl key on his keyboard (depending on his operating system) along with the P key, link would be activated.
A Simple Example:
<a href="http://www.tuton.orianaitsolutions.com/" target="_blank" >Tuton Home</a> | <a href="http://www.google.com/" target="_self" >Google Search</a> | <a href="http://www.tuton.orianaitsolutions.com/html/html_links.com/" target="_top" >Tuton HTML Link Tutorial</a>


This will produce predefined results, You can try them and come back to proceed with rest of the tutorial:

Base Path for Links:

It is not mandate to give a complete URL for every link. You can get rid of root path if you will use <base> tag in your header. This tag is used to give a base path for all the links. So your browser will concatenate given relative path to this base path and will make a complete URL.
For example we have used following base tag in all the pages at tuton.orianaitsolutions.com:

<base href="http://www.tuton.orianaitsolutions.com/">
Linking to a Page Section:

You can create a goto link to a particular section of a page by using name attribute. Here we will create three links with-in this page itself.
First create a link to reach to the top of this page. Here is the code we have used for the title heading HTML Text Links

<h1>HTML Text Links <a name="top"></a></h1>

Now you have a placeholder where you can reach. To reach use the following code with-in this document anywhere:

<a href="/html/html_links#top">Go to the Top</a>

This will produce following link and you can try using this link to reach to the top of this page:
NOTE: Here we are using relative path. You can give complete URL and then # and then link name eg. http://tuton.orianaitsolutions.com/html/html_links#top
You can use this type of URL in any other page to reach directly to a particular section

Setting Link Colors:

You can set colors for your links, active links and visited links using link, alink and vlinkattributes attributes of <body> tag. But it is recommended to use CSS to set colors of links, visited links and active links to have consistency across pages.

a:link {color:#900B09; background-color:transparent}
a:visited {color:#900B09; background-color:transparent}
a:active {color:#FF0000; background-color:transparent}
a:hover {color:#FF0000; background-color:transparent}
Create Download Links:

You can create text link to make your PDF, or DOC or ZIP files downloadable. This is very simple, you just need to give complete URL of the downloadable file as follows:

<a href="http://www.example.com/file.pdf">Download File</a>

Related Videos