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