Summary -

In this topic, we described about the below sections -

HTML Links are used to link to other pages. The new page can be opened on same tab or another tab based on options provided. All HTML links are equal to Hyperlinks.

Hyperlink has some text or image, if it clicked it will redirect to some link to other HTML document provided with it. HTML Links represented with <a> tag.

Any text in between <a>..</a> defines it as Link to browsers. lt;a> element is nested element.

Syntax -

<a href=”url here”>link text</a>

Example -

<!DOCTYPE html>
<html>
	<head>
		<title> HTML Link example.. </title>
	</head>
	<body>
		<!--  Below is the link for library -->
		<a href="tutorials-library.htm">
		Tutorials Library</a>
	</body>
</html>

<a> tag has different attributes to provide additional information. The below are the list of attributes.

  1. Href attribute
  2. Color attribute
  3. Target attribute

Let’s discuss about each attribute in detail.

Href attribute -

Href attribute specifies the destination web address. Link text is the visible part of HTML link. If the text is clicked, the browser will be send to the specified we address.

The destination web address can be of two types. Those are -

  1. Local web address
  2. Remote Web address

Local web address -

The local web address means, the address which is local to the website. The local web address can be provided by just providing html document name.

Syntax -

<a href="html document name">Link text</a>

Example -

<!DOCTYPE html>
<html>
	<head>
		<title> HTML Local Link example.. </title>
	</head>
	<body>
		<!--  Below is the Local web address link -->
		<a href="index.htm">HTML tutorial Index</a> 
	</body>
</html>

The above syntax will only applicable if the destination HTML doc and current document opened on the same folder. If the documents are in different folders, then those can be mentioned like below.

Syntax -

If the target HTML document is at upper folder than the current one, the syntax would be

<a href="../html document name">Link text</a>

Example -

<!DOCTYPE html>
<html>
	<head>
		<title> HTML Local Link example.. </title>
	</head>
	<body>
	    <!--  Below is the tutorials library link -->
	    <a href="../tutorials-library.htm"> Tutorials Library</a> 
	</body>
</html>

Output -

If the target HTML document is at lower folder than the current one, the syntax would be

<a href="folder-level/html document name">Link text</a>

Example -

<!DOCTYPE html>
<html>
	<head>
		<title> HTML Local Link example.. </title>
	</head>
	<body>
	    <!--  Below is the parllel folder link  -->
	    <a href="../sap-abap/index.htm">SAP ABAP Tutorial Index</a> 
	</body>
</html>

Output -

Remote web address:

The remote web address means, the address which is different from the current web address. The remote web address can be provided by complete web address.

Syntax -

<a href="complete website address">Link text</a>

Example -

<!DOCTYPE html>
<html>
	<head>
		<title> HTML remote Link example.. </title>
	</head>
	<body>
	  <!--  Below is Remote link-->
	  <a href="http://www.mainframestechhelp.com/index.htm">MTH Home</a>
	</body>
</html>

Output -

Mainframestechhelp Home

COLOR Attribute -

Color attribute used to change the default colors of HTML links. Normally, the browsers will display the following colors for HTML links by default.

  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red

Syntax -

<style>
	a:link    {color:blue;}
	a:visited {color:orange;}
	a:hover   {color:olive;}
	a:active  {color:green;}
</style>

Example -

<!DOCTYPE html>
<html>
	<head>
		<title> HTML Link color example.. </title>
		<style>
			a:link    {color:blue;}
			a:visited {color:orange;}
			a:hover   {color:olive;}
			a:active  {color:green;}
		</style>
	</head>
	<body>
	  <!--  Below is Remote link with color attribute -->
	  <a href="http://www.mainframestechhelp.com">MTH Home</a> 
	</body>
</html>

Output -

Target Attribute:

The Target attribute used to specify where to open the target linked document. The target can be same browser or different browser.

Syntax -

<a href="complete website address" target=”target_value”>Link text</a>
Target ValueDescription
_blankOpens the linked document in a new window or tab
_selfOpens the linked document in the same document
_parentOpens the linked document in the parent document
_topOpens the linked document in the full body of the window
frame-nameOpens the linked document in provided frame

Example -

<!DOCTYPE html>
<html>
	<head>
		<title> HTML Link target example.. </title>
	</head>
	<body>
	   <!--  Below exampls for opening link new tab or window -->
	   <a href="http://www.mainframestechhelp.com" target="_blank">
	   MTH Home</a> 
	</body>
</html>

Output -