The HTML links are also known as HTML hyperlinks, which are used to direct to another document upon clicking on it. In short, The HTML link opens another document.
When you hover your mouse over HTML links, the mouse arrow turns into little hand icons to represent the user this is a link.
The HTML <a> tag defines a hyperlink.
Syntax:
<a href="url"> Your link text goes here ... </a>Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Link</title>
</head>
<body>
<p> <a href="https://www.elsebazaar.com/blog"> CLICK HERE</a>, This link will take you to another page. </p>
</body>
</html>
Output:
Links Appearance:
By default, the active, visited and unvisited links will appear in the following colors:
- an active link: underline and red color
- an unvisited link: underline and blue color
- a visited link: underline and purple color
Link Display:
By default, the linked page will display in the current browser window.
Links Target Attribute:
You can display your linked document on another page also, but to do it you need to specify a target for the link.
The target attribute specifies where to open the linked page.
The target attribute has four values:
| S.No | Target Attributes | Description |
|---|---|---|
| 1. | _self | Default. Opens the linked page in the same window. |
| 2. | _blank | Opens the linked page in a new window or tab. |
| 3. | _parent | Opens the linked page in a parent frame. |
| 4. | _top | Opens the linked page in a full body of the window. |
Syntax:
<a href = "url" target = "_self"> Opens in self window </a>
<a href = "url" target = "_blank"> Opens in new documents </a>
<a href = "url" target = "_parent"> Opens in parent frame </a>
<a href = "url" target = "_top"> Opens in a full body of the window </a>Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Target Link</title>
</head>
<body>
<p>Click any of the following links to see the outputs</p>
<a href = "https://www.elsebazaar.com/blog" target = "_self"> Opens in self window </a> |
<a href = "https://www.elsebazaar.com/blog" target = "_blank"> Opens in new documents </a> |
<a href = "https://www.elsebazaar.com/blog" target = "_parent"> Opens in parent frame </a> |
<a href = "https://www.elsebazaar.com/blog" target = "_top"> Opens in a full body of the window </a>
</body>
</html>
Output:
Click any of the following links to see the outputs
Opens in self window | Opens in new documents | Opens in parent frame | Opens in a full body of the windowContinue Reading to the next page…