codescracker


html

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:

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:

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.

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:

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:

HTML Links Colors

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

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:

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:

html links

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 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

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test