- HTML Basics
- HTML Home
- HTML Basics
- HTML Document Structure
- HTML Data Types
- HTML Attributes
- HTML Fonts
- HTML Headings
- HTML Character Entities
- HTML Horizontal Line
- HTML Line Break
- HTML Paragraph
- HTML Citation Definition
- HTML Quotations
- HTML Comments
- HTML Styles
- HTML Formatting
- HTML CSS
- HTML Tags
- HTML Basic Tags
- HTML All Tags
- HTML Root Tags
- HTML Metadata Tags
- HTML Section Tags
- HTML Head Heading Tags
- HTML Flow Tags
- HTML Phrasing Tags
- HTML Embedded Tags
- HTML Interactive Tags
- HTML Meta Tags
- HTML Texts
- HTML Text Formatting
- HTML Physical Style Text
- HTML Logical Style Text
- HTML Organizing Text
- HTML Arranging Text
- HTML Displaying Lists
- HTML List
- HTML Links Tables
- HTML Links URLs
- HTML Links
- HTML URL Encode
- HTML Tables
- HTML Images Colors
- HTML Images Colors
- HTML Images
- HTML Color Codes
- HTML Canvas
- HTML Backgrounds
- HTML Forms
- HTML Forms
- HTML Form Tag
- HTML Input Tag
- HTML Button Tag
- HTML Multiple-Choice
- HTML Select Tag
- HTML Option Tag
- HTML Optgroup Tag
- HTML Textarea Label
- HTML Fieldset Legend
- HTML Datalist Tag
- HTML Keygen Tag
- HTML Output Tag
- HTML Progress Tag
- HTML Meter Tag
- HTML Submit Form
- HTML enctype Attribute
- HTML action Attribute
- HTML Method Attribute
- HTML Get Method
- HTML Post Method
- HTML Interactive
- HTML Interactive Web
- HTML Details Summary
- HTML Menu Tag
- HTML Command Tag
- HTML KBD Tag
- HTML Time Tag
- HTML Multimedia
- HTML Multimedia
- HTML Multimedia Tags
- HTML Audio Video
- HTML Embedded Multimedia
- HTML EMBED Tag
- HTML OBJECT Tag
- HTML FIGURE FIGCAPTION
- HTML Advance
- HTML Blocks
- HTML Classes
- HTML Iframes
- HTML JavaScript
- HTML Layouts
- HTML Responsive
- HTML Test
- HTML Online Test
- Give Online Test
- All Test List
HTML Links
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:
- 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:
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 |
« Previous Tutorial Next Tutorial »