Visit Original Non-AMP Page

Links in HTML – Learn HTML for Beginners

Links (Hyperlinks) are found in nearly all Web-Pages. Links are used to Redirect user to one page to another. Other than Redirecting User Links can be used to Get and Send file, processing files in Background open a new tab ETC.
So in this Tutorial we are going to Learn about LINKS.

Link Tag <a>:

<a> or HTML Element Defines Links inside HTML Documents.
To add Links/Hyperlinks to a webpage we have to use HTML’s <a> Tag for that. Between the starting <a> and closing </a> of Link we have to write our Text.

href Attribute

HTML href attribute Defines the path/URL for our Link Tag.
for adding path to our Link Tag we have to write href attribute inside Link’s Starting tag <a> and inside the Double quotas of href we have to gave our Web-Page’s URL or Web-site’s URLhref=”url”.

HTML Link’s Syntax:

<a href="http://programminghead.com"> click here </a>

Links Type:

Local Links

There is not always the case when you have to redirect your user to a page that’s only available on the Internet, there are many cases when you just have to redirect or link a page from your Local Machine (Computer) or a file that available on the same Location/Folder/Directory.
in local web-page cases we can link a page without giving the full path. Just the file name and followed by the file Extension (.html).

HTML Local Link Example:

<a href="index.html"> Click me </a>

Empty/same Link

There are Some cases when you Don’t want to Redirect user to Another page, or you just want to Link the Current page for some reasons like (Reloading the Same page), You can use Empty link.
You just have to enter # insider the href‘s double quotas href=”#”.

<a href="#"> Click me </a>

This Empty url/# will redirect user to Current Web-page’s location. You will find a # sign at the end of the url after clicking on the Empty URL.

HTML Links Example:

<html>
 <head>
  <title>HTML Links</title>
 </head>
 <body>
  <a href="home.html"> Local Link </a> <br/>
  <a href="http://programminghead.com/test.html"> Link with full Path </a> <br/>
  <a href="#"> Empty/Current page Link </a> <br/>
  <a> un-click-able Link </a>
 </body>
</html>

Styling HTML Links by using CSS

Link Text Color Style

When you create Links in HTML, you will get a Link output on its Default Blue Color But using style you can change that.
just target your link by tag (a) or by id (#idname). and inside the Curly add CSS color Property and gave a Color to your Link Text.

Link Color Style Example

a{
 color: red;
}

Link Background Color Style

for Changing Link text’s Background color, you have to use CSS background-color property.

Link Background Color Example

a{
 background-color: yellow;
}

Link Font size and Font Family and underline Style

for Changing Link text’s Font Size, you have to use CSS font-size property. This will resize your Link’s text
for Changing Link’s Font Family, you have to use CSS font-family property. This will change The Default Font of your Link’s text
for adding Urline to Link’s text, you have to use CSS text-decoration property. This will change your Link’s text default Font.

Link Style Example

a{
 font-size: 15px;
 font-family: cursive;
 text-decoration: underline;
}

Link Hover Style

for adding a nice Hover Effect on Link’s text. we have to use CSS: hover attribute right after the tag name/id. This will only run the CSS Properties on Mouse Hover.

Link Hover Effect

a:hover{
  background-color:red;
  color:white;
  text-decoration:underline;
}

Jump to/Bookmark using Links

Using Links, you can jump to any line in the webpage and external also. This will scroll your Visitors to targeted text/div/image/para/headline etc.
so, you just have to write your Targeted tag’s ID after the # sign inside the href=”” double quotes.

<!-- Add a Unique ID to your Feild -->
<p id="Parafive"> This is Paragraph 5 </p>

<!--Create a Click Able Link with Previous Elements ID-->
<a href="#Parafive"> Goto Paragraph 5 </a>

NOTE: You also can do the Same thing with External Webpages. You just have to write full path of external Webpage before the Hast sign #idname and ID name.

<a href="programminghead.com/test.html#five"> para file on External Web-page </a>

HTML Link Target Attribute

When we click on the HTML Links, the linked webpage loads on the same page. but there is Target Attribute who gives us freedom to Perform Different Tasks like. Link opens in new tab. small/Big pop-up etc.

_blank

Opens a new black tab in your Browser to load your Linked Web-Page.

<a href="test.html" target="_blank"> click me </a>

_self

This is default HTML Link Target, It Opens your Linked Web-Page in the same Browser Window.

<a href="test.html" target="_self"> click me </a>

_parent

Opens parent links in a one Browser window inside Different Frames.

<a href="test.html" target="_parent"> click me </a>

_top

Opens your Linked Web-Page on the Entire Browser window.

<a href="test.html" target="_top"> click me </a>

HTML Link Target Attribute Example

<html>
<head>
	<title>Bookmark/Goto Link</title>
	<style type="text/css">
		a:hover{
			background-color: red;
			text-decoration: underline;
			color: white;
		}
		#hideLink:hover{
			opacity: 0.5;
		}
	</style>
</head>
<body>
	<a href="test.html" target="_blank">new-tab Link</a><br/>
	<a href="test.html" target="_self">Default Link</a><br/>	
	<a href="test.html" target="_top">Top Link</a><br/>
	<a href="#">Empty Link</a><br/>
	<a id="hideLink" href="test.html">Low Opacity on Hover</a>	
</body>
</html>