HTML Links

Links are found in nearly all web pages. Links allow users to click their way from page to page.

HTML Links - Hyperlinks

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

Note: A link does not have to be text. It can be an image or any other HTML element.

HTML Links - Syntax

Hyperlinks are defined with the HTML <a> tag:

<a href="https://www.learncomputer.in">Visit our HTML tutorial</a>

The href attribute specifies the destination address (https://www.learncomputer.in/) of the link.

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

Clicking on the link text will send you to the specified address.

Note: Without a forward slash at the end of subfolder addresses, you might generate two requests to the server. Many servers will automatically add a forward slash to the end of the address, and then create a new request.

Local Links

The example above used an absolute URL (a full web address).

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

<a href="images.html">HTML Images</a>

HTML Link Colors

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

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

HTML Links - The target Attribute

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

  • _blank - Opens the linked document in a new window or tab
  • _self - Opens the linked document in the same window/tab as it was clicked (this is default)
  • _parent - Opens the linked document in the parent frame
  • _top - Opens the linked document in the full body of the window
  • framename - Opens the linked document in a named frame

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

<a href="https://www.learncomputer.in/" target="_blank">Visit Learn Computer Academy!</a>

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

<a href="https://www.learncomputer.in/" target="_top">HTML5 tutorial!</a>

HTML Links - Image as Link

It is common to use images as links:

<a href="default.asp">
    <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

Link Titles

The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.

<a href="https://www.learncomputer.in/" title="Go to Learn Computer HTML section">Visit our HTML Tutorial</a>
Previous Next