Definition: An HTML link is a reference to data that the reader can navigate from one page to the other. Links are usually referred to as a hyperlink. A hyperlink may be a word, image or phrase that you can click and move to a new document or new section within the current document.
HTML Links | HTML Anchor Tag <a>
Basically, hyperlinks help the users to browse information at hyperspeed.
Syntax: <ahref=”url”>Link text</a>
Here, ahref is an attribute that indicates the destination address of the link. And the link text is visible to the user.
Example:
<a href="https://tutorials.freshersnow.com/html/">HTML tutorials</a>
HTML Local Links
A local link is a link to the same website. Here, Https is not mentioned in the link.
Example:
<a href="tutorials.freshersnow.com">Freshersnow Tutorials</a>
HTML Colors Links
Links are present in different colors. Basically, the color links are set to default colors but they can be customized.
The links usually appear as follows:
- An unvisited link is blue and underlined.
- A visited link is purple and underlined.
- An active link is red and underlined.
While the default link colors can be changed by using CSS.
Example:
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
Button Links
Button Links can be in the form of text or buttons. Using CSS, links can be styled as buttons.
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
HTML Links Target Attribute
The target attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form. Target attribute contains values like:
- _blank: opens the linked document in a new window
- _self: opens the linked document in the same window.
- _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 named frame.
Example:
<a href="tutorials.freshersnow.com" target="_blank">Freshersnow Tutorials</a>
HTML Text Links
A text link is specified with an HTML <a> tag(anchor tag). Anything between <a> and </a> becomes part of the part of the text link. Any user can click that part and reach out to the linked document.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Textlink Example</title>
</head>
<body>
<p>Click the link below</p>
<a href = "https://tutorials.freshersnow.com" target = "_self">Freshersnow Tutorials</a>
</body>
</html>
Output:
Click the link below
HTML Download Links
Text links can be created to download links like PDF, Zip, Doc files. In order to download the files we just need to give the complete URL of the downloadable file as follows:
Example:
<a href ="https://www.freshersnow.com/wp-content/uploads/2019/04/AMCAT-Aptitude.pdf">Download AMCAT Aptitude PDF File</a>
HTML Image Links
It is very simple to insert an image link. We just need to insert an image format in the place of text in the text link.
Example:
<h2>HTML Image Example</h2> <img src="Tutorials by Freshersnow.jpg" alt="Freshersnow"/>
HTML E-mail Links
HTML anchor tag provides you an option to specify an email address to send an e-mail. Here we are using mailto: email address along with href attribute in the anchor tag.
Examples:
<a href = "mailto: abc@example.com">Send Email</a>
Default Settings for E-mail
Here you can give a default email subject and email body along with your email address.
Example:
<a href = "mailto:abc@example.com?subject = Feedback&body = Message">Send Feedback</a>