HTML Links

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

Freshersnow Tutorials

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>