HTML Anchors and Hyperlinks

Next Page Previous Page

The anchor element is defined by <a>, which is usually used to create HTML hyperlinks. These links can take us to various sources like web pages, images, buttons, and text. 

Example :

<!DOCTYPE html>
<html>
	<head>
		<title> HTML Anchors and Hyperlinks </title>
	</head>
	<body>
		
		<p> Anchoring a word using an anchor tag.</p>
		<a href="http://www.google.com" > Word </a>
		<br><br>
		
		<p>Anchoring a whole paragraph using Anchor tag. </p>
		<a href="http://www.google.com" > This paragraph will act as a source that will take you to the destination </a>
		<br><br>
		
	</body>
</html>

Attributes of Anchor Tag :

  • Href
  • Target
  • Download

 

1: Href 

Href stands for “hypertext refers” which refers to the destination target for our anchor element. Usually contains the url for our destination.

Example

<!DOCTYPE html>
<html>
	<head>
		<title> HTML Anchors and Hyperlinks </title>
	</head>
	<body>
		
		<p> Anchoring a word using an anchor tag.</p>
		<a href="http://www.google.com" > This is our source text that will take us to destination url help by href. </a>
		
	</body>
</html>

We can do a lot more than just linking the other webpages with href.

  • Direct Link to elements.
  • Use protocols like HTTP for linking. 
  • Run Scripts 

Example :

<!DOCTYPE html>
<html>
	<head>
		<title> HTML Anchors and Hyperlinks </title>
		
		<!-- We can also run script in head here using href -->
		<link rel="stylesheet" href="test.css">

	</head>
	<body>
			<div id="1234">
				This is a target element with id 1234.
			</div>
			
			<a href = "#1234" >this will take us to target element.</a>
			
			<br>
			
			<p> Lets create a target using http </p>
			<a href="http://www.google.com"> Creating a link to google                         
                                  homepage.</a>
	</body>
</html>

 

 

2: Target 

The target attributes decide the opening of the destination page. which can be?

 

Syntax: <a target="_blank|_self|_parent|_top|framename">

Which

  • _blank: destination page will be open on a new tab.
  • _self:

 the self is set by default, the destination page will be open on the same page.

  • _parent: destination link will be open on the parent frame.
  • _top: destination link will be open on top of the body.

 

Example:

<!DOCTYPE html>
<html>
	<head>
		<title> HTML Anchors and Hyperlinks </title>
	</head>
	<body>
		
			<a href = "http://www.google.com" target="_blank">
			
			<a href = "http://www.google.com" target="_self">
			
			<a href = "http://www.google.com" target="_parent">
			
			<a href = "http://www.google.com" target="_top">
	
	</body>
</html>

3: Download

 download attribute downloads the value given to the target element in the document.

Example:

<!DOCTYPE html>
<html>
	<head>
		<title> HTML Anchors and Hyperlinks </title>
		
		<!-- We can also run script in head here using href -->
		<link rel="stylesheet" href="test.css">

	</head>
	<body>		
			<a href="/image/ice.jpg" download>
	</body>
</html>

 

Next Page Previous Page

Treding Tutorial

Popular Tutorials

to Learn now