Open-Source Internship opportunity by OpenGenus for programmers. Apply now.
Reading time: 20 minutes
In this article, we will learn about working with links in HTML like an expert. We will see:
- how to create a link?
- Different types of links like local, external
- target attributes for links
- other features like bookmarking a links, using CSS styling
HTML links are hyperlinks. They are used to link multiple web pages together or a part of a webpage within a webpage as a bookmark.
HTML links(text) by default have following features:
- Unvisited Link: Blue and underlined
- Visited link: Underlined and purple
- Active link: Underlined and red
- Whenever we hover (use our mouse pointer) over a link, the mouse pointer changes from the normal arrow to a hand like symbol.
Try to hover above the following link to see the hand symbol:
1) Creating a link
Links in HTML are generated using the <a> element.
<a> specifies the link creation and its href attribute is used to provide the destination address in form of a URL(external links) or relative address(local links).
Within the HTML element <a>, there must be another HTML element that will act as a link.
Note: Generally, texts are used for hyperlinks. But all HTML tags can be treated as links.
Syntax:
<a href="{destination address}"><HTML_element><content></HTML_element></a>
Example: Text as a link
<a href="https://iq.opengenus.org/">Visit OpenGenus Foundation.</a>
Output:
The above text acts as a link to OpenGenus Foundation website.
Example: Image as a link
<a href="https://iq.opengenus.org/"><img src="OpenGenus.jpg" alt="OpenGenus Logo"></a>
Output:
The above image acts as a link to OpenGenus Foundation website.
Example: Button as a link
<a href="https://iq.opengenus.org/"><button> OpenGenus Website </button></a>
Output:
The above button acts as a link to OpenGenus Foundation website.
2) Local Links
Generally, the destination address specified in the href attribute of link contains absolute URL of the destination webpage.
But, if we want to visit a local link, i.e., a link within the website, then relative address can be given.
Syntax:
<a href="/relative address">
Example:
Suppose, we are on OpenGenus Foundation image storage website, then for accessing an image, we just need to provide a relative link to the image rather than providing absolute URL of it.
<a href="/content/images/2019/08/OpenGenus.jpg"> OpenGenus Foundation Logo </a>
The relative address /content/images/2019/08/OpenGenus.jpg will only work when we are on OpenGenus domain.
Output:
3) External links
External links require absolute URL for destination address.
Syntax:
<a href="{destination address}"><HTML_element><content></HTML_element></a>
Example:
<a href="https://iq.opengenus.org/">Visit OpenGenus Foundation.</a>
Output:
The above text acts as a link to OpenGenus Foundation website.
4) Using CSS to stylize the links
The default properties of HTML links are described in the introduction.
The default features can be overridden using CSS.
Syntax:
<style>
a:link {property:value,...;}
a:visited {property:value,...;}
a:hover {property:value,...;}
a:active {property:value,...;}
</style>
Explanation:
- link: Specifies features of a hyperlink that is neither active nor visited.
- visited: Specifies features of a hyperlink that has been visited.
- hover: Specifies feature of a hyperlink when mouse pointer is hovered over it.
- active: Specifies feature of a hyperlink when it is active in another tab or daemon.
Example:
<style>
a:link {
color: blue;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: red;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: white;
background-color: black;
border: 2px solid black;
text-decoration: underline;
}
a:active {
color: blue;
border: 2px solid black;
text-decoration: underline;
}
</style>
<a href="https://iq.opengenus.org/">OpenGenus Foundation</a>
Output:
This link is defined by a:link.
This link is defined by a:hover.
This link is defined by a:visited.
5) Adding title to links
Title attribute is an optional attribute for links.
It contains metadata and tooltip information about links.
Whenever we hover above the link, the title displays the message it has as its content.
Syntax:
<a href="{destination address}" title="{tooltip information}">Link content</a>
Example:
<a href="https://iq.opengenus.org/" title="OpenGenus Foundation Website"> Visit OpenGenus </a>
Output:
Hover above the link above and see the tooltip.
6) Creating a bookmark using links
Bookmarks are link to a specific part of a webpage.
When a webpage is very long, it is easier to create a table of contents in the beginning with bookmarks to specific topics for ease of access.
Bookmarks are created by adding relative link of destination HTML element using the ID attribute.
Note: Table of contents on this webpage uses bookmarks.
Syntax: Create a bookmark
<a href="#{id value}"> Bookmarked Topic </a>
Syntax: Create ID for bookmarked location
<{html_element} id="value">
Example: Creating link to Table of contents on this webpage
<a href="#content"> Visit Table of contents </a>
Here, we assume that Table of contents was written in an HTML content that had Id attribute set to value content.
7) Target attribute for links
Target attribute of HTML tag <a> is used to specify where to open the destination webpage.
Target attribute can have following values:
- _blank: Opens the webpage in a new tab/window.
- _self: Default option. Opens the destination in current webpage.
- _parent: Opens linked document in parent frame.
- _top: Opens linked document in full body of webpage. Useful when the frame is locked.
Syntax:
<a href="{destination}" target="{value}"> Link Content </a>
Example: Using target : _self
<a href="https://iq.opengenus.org/" target="_self"> OpenGenus Foundation </a>
Output:
Example: Using target : _blank
<a href="https://iq.opengenus.org/" target="_blank"> OpenGenus Foundation </a>
Output:
Example: Using target : _parent
<a href="https://iq.opengenus.org/" target="_parent"> OpenGenus Foundation </a>
Output:
Example: Using target : _top
<a href="https://iq.opengenus.org/" target="_top"> OpenGenus Foundation </a>
Output:
