HTML Links Hyperlinks
HTML links, or hyperlinks, connect web pages. They’re created using the <a> tag with the href attribute, which specifies the destination URL. Users can click on links to navigate between different pages or resources.
Note: A hyperlink can be represented by an image or any other HTML element, not just text.
By default, links will appear as follows in all browsers:
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
Syntax:
<a href="url">link text</a>
target Attribute:
| Attribute | Description |
|---|---|
_blank | Opens the linked document in a new window or tab. |
_self | Opens the linked document in the same frame or window as the link. (Default behavior) |
_parent | Opens the linked document in the parent frame. |
_top | Opens the linked document in the full body of the window. |
framename | Opens the linked document in a specified frame. The frame’s name is specified in the attribute. |
HTML Links Examples
Example 1: In this example we contains a paragraph instructing users to click on the link labeled “w3wiki,” which directs to the website “https://www.w3wiki.net”.
<!DOCTYPE html>
<html>
<head>
<title>HTML Links</title>
</head>
<body>
<p>Click on the following link</p>
<a href="https://www.w3wiki.net"
>w3wiki</a
>
</body>
</html>
Output:
HTML Links example output
Example 2: In this example we demonstrates the use of target attributes in links. Each link opens in a different context: _blank opens in a new window or tab, _self in the same frame, _parent in the parent frame, _top in the full window body, and framename in a specified frame.
<!DOCTYPE html>
<html>
<head>
<title>Target Attribute Example</title>
</head>
<body>
<h3>
Various options available in the
Target Attribute
</h3>
<p>
If you set the target attribute to
"_blank", the link will open in a new
browser window or tab.
</p>
<a
href="https://www.w3wiki.net"
target="_blank"
>
w3wiki
</a>
<p>
If you set the target attribute to
"_self", the link will open in the
same window or tab.
</p>
<a
href="https://www.w3wiki.net"
target="_self"
>
w3wiki
</a>
<p>
If you set the target attribute to
"_top", the link will open in the full
body of the window.
</p>
<a
href="https://www.w3wiki.net"
target="_top"
>
w3wiki
</a>
<p>
If you set the target attribute to
"_parent", the link will open in the
parent frame.
</p>
<a
href="https://www.w3wiki.net"
target="_parent"
>
w3wiki
</a>
</body>
</html>
Output:
Contact Us