HTML Links

HTML Links

  • HTML links are nothing but the hyperlinks.
  • Hyperlinks are used to navigate between web pages by clicking on words, phrases, and images.
  • The HTML anchor tag is used to define a hyperlink.
Syntax:
<a href="URL"> Link text </a>

href: Specifies the destination address
Link text: Link text is visible part.

Example: Hyperlink

<!DOCTYPE html>
<html>
     <head>
          <title>HTML links Example</title>
     </head>
     <body>
          <p>Click following link</p>
          <a href="http://www.tutorialride.com/">Visit TutorialRide.com</a>
     </body>
</html>


Output:
Click following link
Visit TutorialRide.com

  • Hyperlink appears blue in color and underlined.
  • When the mouse cursor moves on the hyperlink, its arrow changes the shape to a little hand.

The target attribute

  • The target attribute is used to specify the location where linked document is opened.
  • Every target name starts with underscore (_).
HTML provides 4 basic target options.

OptionDescription
_topOpens the linked document in new window breaking all the frames.
_blankOpens the linked document in new blank window.
_parentOpens the linked document in the parent frame of the current document.
_selfOpens the linked document in the current frame.

Example: target attribute

<!DOCTYPE html>
<html>
     <head>
          <title>Hyperlink Example</title>
     </head>
     <body>
          <p>Click any of the following links</p>
          <a href="http://www.tutorialride.com/" target="_blank">Opens in New</a></br>
          <a href="http://www.tutorialride.com/" target="_self">Opens in Self</a></br>
          <a href="http://www.tutorialride.com/" target="_parent">Opens in Parent frame</a></br>
          <a href="http://www.tutorialride.com/" target="_top">Opens in new window</a>
     </body>
</html>


Output:
target link

HTML links colors

Colors of hyperlink can be set by using the following attributes.

AttributeDescription
linkUsed to change the default color of the hyperlink.
alinkUsed to change the default color of the active hyperlink.
vlinkUsed to change the default color of the visited hyperlink.

Example:

<!DOCTYPE html>
<html>
     <head>
          <title>Hyperlink Example</title>
     </head>
     <body link="#000080" alink="#54A250" vlink="#ff0000">
          <p>Click on the following link</p>  
          <a href="http://www.tutorialride.com/" target="_blank">TutorialRide.com</a>
     </body>
</html>


Output:

Click on the following link

TutorialRide.com

The color of the active link in this case would be: TutorialRide.com
And, the color of the link once you have visited it, would be : visited link
▲