HTML Links

« Previous Tutorial Next Tutorial »

A hyperlink interconnects the current Web page with the other Web pages available on the Internet. In HTML, you can create a hyperlink by using the anchor element (A). The hyperlink redirects the user to the another HTML page, image, or file. The A element uses the href attribute to specify the target resource or document that you want to open when the user clicks the hyperlink. The term href stands for Hypertext Reference. The href attribute sets the URL of the target resource.

In HTML, links are defined with the <a> tag. For example,

<A href="http://codescracker.com">codescracker</A>

Here is the sample output produced by the above HTML code:

codescracker

If you click on the codescracker, then you will redirect to the homepage of codescracker.

HTML Link Example

Here is an example demonstrates links in HTML:

<!DOCTYPE html>
<html>
<body>

<a href="http://codescracker.com/html/html-links.htm">This is a Link</a>

</body>
</html>

Here is the sample output produced by the above HTML link example code:

This is a Link

The href attribute specifies the destination address (http://codescracker.com/html/html-links.htm")

Note - You can also use image or any other HTML element as link text.

Now let's discuss about the target and id attribute to understand the concept of hyperlink in a better way.

HTML Link - The target Attribute

The A element uses the target attribute to specify a window where you want to open a document when a hyperlink is clicked. For instance, you can open a document in the same window or in another window just by using the target attribute.

HTML Link target Attribute Values

The table given below describes values for target attribute.

Value	Description
_blank	Opens the linked document in a new unnamed window
_self	Opens the linked document in the current window (this is default value)
_parent	Opens the lined document in the parent window
_top	Opens the linked document in the topmost window
framename	Opens the linked document in a named frame

Example

Following example will open the linked document in a new browser window or in a new tab:

<!DOCTYPE html>
<html>
<body>

<a href="http://codescracker.com" target="_blank">Click Here</a> 

</body>
</html>

Here is the live demo output produced by the above HTML link example code. Click on the Click Here link to watch the effect.

Click Here

HTML Link - The id Attribute

The A element uses the id attribute to create a fragment identifier within a document. A fragment identifier specifies a particular location within a document. You can navigate different locations within a document just by using the id attribute.

The id attribute takes a character string as a value. This value must be unique in the same document. However, it can be reused in different documents.

The id attribute can be used to create bookmarks inside HTML documents. Bookmarks are not displayed in any special way. They are invisible to the reader.

Example

Here is an example demonstrates id attribute in HTML link. Add an id attribute to any <a> element.

<a id="topS">Go To Top</a>

Then create a link to the <a> element (Go To Top):

<a href="#topS">Go To Top</a>

Click on the link below to watch the effect. After clicking on the below link, you will go to the top of this web page:

Go To Top

HTML Local Links

As you can see, the above example used an absolute URL (A full web address)

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

Here is an example demonstrates local links in HTML:

<!DOCTYPE html>
<html>
<body>

<a href="html-links.htm">This is a Link</a>

</body>
</html>

Here is the live demo output produced by the above HTML local link example code:

This is a Link

HTML Links Colors

When you place your mouse cursor over a link, then you will watch the following two things will happen normally:

the arrow of the mouse will turn into a little hand
the color of the link element will change

By default, the link will appear as in all browsers:

Link	Appearance
unvisited link	underline and blue
visited link	underline and purple
active link	underline and red

Change Link Style in HTML

Here is an example shows how to change the defaults of the link, using CSS

<!DOCTYPE html>
<html>
<head>
	<title>HTML Links Example - Link Color</title>
	<style>
		a:link
		{
			color:black;
			background-color:transparent;
			text-decoration:none;
		}
		a:visited
		{
			color:black;
			background-color:transparent;
			text-decoration:none;
		}
		a:hover
		{
			color:red;
			background-color:transparent;
			text-decoration:underline;
		}
		a:active
		{
			color:red;
			background-color:transparent;
			text-decoration:underline;
		}
	</style>
</head>
<body>

<a href="http://codescracker.com" target="_blank">This is a link</a> 

</body>
</html>

Here is the live demo output produced by the above HTML link color example code:

This is a link

Note - If your webpage is locked in a frame then you are free to use target="_top" to break out of that frame.

HTML Image Link

You can also use any image as a link in HTML. Here is an example demonstrates how to provide image link in HTML:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Link Example - Image Link</title>
</head>
<body>

<a href="http://codescracker.com" target="_blank">
	<img src="codescracker.jpg" alt="codescracker" style="width:42px;height:42px;border:0">
</a>

</body>
</html>

Here is the sample output produced by the above HTML image link example code:

Here is the live demo output of the above HTML image link example:

Note - Here, we have added style, border:0 to prevent IE9 (and earlier) from displaying a border around the image.

Here is another example on HTML links:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Link Example</title>
</head>
<body>

<a href="http://codescracker.com">codescracker</a>

</body>
</html>

Here is the sample output produced by the above HTML link example code:

HTML LINK Tag

HTML provide the LINK tag to link a Web page with an external resource or document, such as a Cascading Style Sheet (CSS) file or an Extensible Markup Language (XML) file. The rel attribute of the LINK tag is used to create relation with the other resources. This attributes takes different values that specify which resource is to be linked with the Web page. For example, the stylesheet value specifies that the page is linked with a stylesheet file.

Here is an example of the LINK tag:

<body>
	<link rel="stylesheet" href="mystylesheet.css">
</body>

In addition to the stylesheet, there are some other values of the rel attribute which are described in the table given here:

Name	Description
alternate	Specifies the link on the basis of the other attributes of the LINK tag
archives	Creates a relation to the collection of records, documents, or other materials of historical events
author	Provides a hyperlink to the page that contains the information about the author of the current document
bookmark	Indicates that the current document is a permalink or bookmark
external	Refers to the content or a document that is not the part of the current website
feed	Provides the hyperlink to a syndication feed, which is data format that provides the user updated content of a document
first, next, prev, last	Defines the relation between the pages that are the part of a series
help	Represents that the content of the referenced document provides help for the current tag
icon	Specifies an image that indicates the icon of the current document
index	Specifies the document that contains the table of content or index of the current document
license	Indicates that the current document provides copyright license terms
nofollow	Does not allow author or publisher to endorse the referenced document
noreferrer	Secures the referrer details and other information
pingback	Notifies a blog automatically when the other blogs are linked to it
prefetch	Specifies that the highly required resource is to be stored in the cache memory for later use
search	Provides a hyperlink to the resource to specifically search the current document and its related resource
sidebar	Signifies that the referenced document is displayed in the sidebar of the browser. The left-side portion of a Web page is known as sidebar
start	Represents the first document from a list of documents
stylesheet	Refers to the stylesheet for the current document
tag	Provides a tag to the current document that represents the referenced document
up	Provides a hyperlink to a document that is used to go back to the first page or the hope page of the document

HTML Online Test

« Previous Tutorial Next Tutorial »