HTML Links

Links are seen mostly in all web pages. Links are used to make users click their way from page to page.

HTML Links - Hyperlinks


HTML links are considered to be hyperlinks.

By clicking on a link, you can jump to another document.

Note: A link need not be a text alone. It also can be an image or any other HTML element.

HTML Links - Syntax


In HTML, links are always defined using the <a> tag:


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


<a href="http://daks.me">Visit our HTML tutorial</a>
Try it Yourself

The href attribute is used to specify the destination address (http://daks.me) of the link.

The link text is the visible part (Visit our HTML tutorial).

By clicking on the link text you can go to the specified address.

Note: Without having a forward slash on subfolder addresses, you might have to generate two requests to the server. Many servers will usually do an additon of a forward slash to the address, and creates a new request.

Local Links


The example used above is using an absolute URL (A full web address).

A local link (link to the same web site) is can also be specified with a relative URL (without http://www....).


<a href="html_images.php">HTML Images</a>
Try it Yourself

HTML Links - Colors


When you move the mouse over a link, two things will normally happen:

By default, a link will appear like this (in all browsers):

You can change the default colors, by using styles:


a:link    {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover   {color:red; background-color:transparent; text-decoration:underline}
a:active  {color:yellow; background-color:transparent; text-decoration:underline}
Try it Yourself

HTML Links - The target Attribute


The target attribute is used to specify that the linked document should be opened at which place.

The target attribute will be having one of the following values:

This example will be opening the linked document in a new browser window/tab:


<a href="http://daks.me/html_home.php" target="_blank">Visit NGO!</a>
Try it Yourself

Tip: If your webpage is kept locked to a frame, by using target="_top" you can break out of the frame:


<a href="http://daks.me/html_home.php" target="_top">HTML5 tutorial!</a>
Try it Yourself

HTML Links - Image as Link


It is very common to make use of images as links:


<a href="html_home.php">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
Try it Yourself

Note: border:0; is added for preventing IE9 (and earlier) to display a border around the image (when the image clicked is a link).

HTML Links - Create a Bookmark


HTML bookmarks are utilised for allowing readers to jump and read some other specific parts of a Web page.

Bookmarks are very useful when your webpages are very long.

For making a bookmark, you must be first create the bookmark, and then link should be added to it.

If the link is clicked, the page will be scrolling to the specified location with the bookmark.


First, creating a bookmark along with the id attribute:

<h2 id="tips">Useful Tips Section</h2>

Then, adding a link to the bookmark ("Useful Tips Section"), which is done within the same page:

<a href="#tips">Visit the Useful Tips Section</a>

Or, addition of a link to the bookmark ("Useful Tips Section"), from another page:


First, creating a bookmark with the required id attribute:

<a href="html_tips.html#tips">Visit the Useful Tips Section</a>
Try it Yourself

Chapter Summary

  • Use the <a> element for defining a link
  • Use the href attribute for defining the link address
  • Use the target attribute tofor defining where to open the linked document
  • Use the <img> element (inside <a>) for using an image as a link
  • Use the id attribute (id="value") for defining bookmarks in a page
  • Use the href attribute (href="#value") for linking to the bookmark

Test Yourself with Exercises


HTML Link Tags

Tag Description
<a>Defines a hyperlink