How to redirect user from one page to another

In Today’s article, we will learn how to redirect users from one page to another. for redirecting users from one page to another we will use a tag and in some cases, I will use the javascript function to perform the redirection task.

Sometimes we need to redirect the user to another page by clicking on a Button or by clicking on a link it can be an image or it can even division. In Today’s article, I will show you how you can redirect users to another page by writing simple code for it.

Redirect users from one page to another by using “a” tag (simple link)

In the below code, I have shown you how to redirect a user to a specific page using the “a” tag.

<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
</head>
<body>
<div>
	Click below button to redirect from one page to another. This example is using a tag
</div>
<a href="https://marketqna.com/blog/how-to-check-element-or-p-tag-is-visible-or-not-using-jquery/" >Click me to redirect to another page, I am "a" tag</a>
</body>
</html>

In the above code, I have written “a” tag which is used for writing the URL of another page. URL is a Uniform Resource Locator.

If you look closely then you will understand that “a” tag has href attribute where the link to another page is added. basically, the URL of another page is added. and “a” tag is closed.

If you use this code in your HTML page and if you click on “Click me to redirect to another page, I am “a” tag” then the user will be redirected to another page.

Redirect the user to another page on the new tab

In the below example, if you look closely then you will get to know that a new attribute is added “target” which is basically used where you want to open a page. as we want to redirect users from one page to another page but I also want to open a new tab of browser then we will set “target” to _blank. By using target as a blank if anyone clicks on the below link he will be redirected to another page on the new tab of the browser.

<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	<div>
	Click below button to redirect from one page to another. This example is using a tag
</div>
<a href="https://marketqna.com/blog/how-to-check-element-or-p-tag-is-visible-or-not-using-jquery/" target="_blank" >Click me to redirect to another page, I am "a" tag</a>

</head>
<body>

How to redirect the user to another page on a button click?

In the below code, I will show you how you can redirect the user to another page by clicking on the button.

<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	<div>
	Click below button to redirect from one page to another.
</div>
<input type="button"  onclick="RedirectUserToAnotherPage()" value="Click me to redirect from one page to another using button">
</head>
<body>
<script>
	
	function RedirectUserToAnotherPage()
	{
		window.location.replace("https://marketqna.com/blog/how-to-check-element-or-p-tag-is-visible-or-not-using-jquery/");
	}
</script>

</body>
</html>

In the above example I have written the code of the button, whenever any user clicks on a button called “Click me to redirect from one page to another using button” function “RedirectUserToAnotherPage” will be executed and the user will be redirected to another page. In function “RedirectUserToAnotherPage” JavaScript window.location.replace is used which is used to redirect the user to another URL. This function accepts another page address as a parameter.

How to redirect the user to another page on image click?

Sometimes we want to redirect the user to another page by clicking on the image. Like we are showing some products to users after clicking on Image you want to redirect the user to another page which is the supposed product details page. to solve a situation like the above you can check the below code for performing your task.

<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	
</head>
<body>
<div>
	Redirect user from one page to another page by clicking on image.
</div>
<a href="https://marketqna.com/blog/how-to-check-element-or-p-tag-is-visible-or-not-using-jquery/">
<img src="" style="height: 100px; width: 100px;"/>
</a>
</body>
</html>

In the above code, I have nested “img” tag to “a” tag, as you already know “a” tag is used for redirecting users from one page to another page. In our example, we want to redirect users by clicking on an image. In “img” tag src attribute is written which is used to write the source of an image. As you can see I have written an image path to it.

How to redirect users to another page by clicking on div?

In the below code, we will learn how to redirect the user to another page by clicking on div. first, we write the code of our regular “a” tag and we will add our regular div code to a and as already discussed I will add another page target to a tag. is it simple?

<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	
</head>
<body>
<div>
	Redirect user to another page by clicking on div.
</div>
<a href="https://marketqna.com/blog/how-to-check-element-or-p-tag-is-visible-or-not-using-jquery/">
<div>
	Click me to redirect to another page.
</div>
</a>
</body>
</html>

As you can see in the above code we have added ‘div’ tag to a tag and we have specified the target of another page.

How to redirect user to another page by clicking on p tag?

In the below code, we will write HTML code to redirect users to another page by clicking on ‘p’ tag. As you have already seen that how we have redirected users to another page by clicking on div, to redirect users by clicking on ‘p’ tag is also the same as dive. let’s see how…

<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	<div>
	Redirect user to another page by clicking on "p" tag.
</div>

<a href="https://marketqna.com/blog/how-to-check-element-or-p-tag-is-visible-or-not-using-jquery/">
<p>
	Click me to redirect to another page.
</p>
</a>
</head>
<body>

How to redirect the user to another page on the existing page load?

Sometimes we have to redirect user to another page without any click event. in below code we will learn how to redirect user to another page without any click event, by just loading page.

<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer">
		
	</script>
</head>
<body>
<div>
	After adding below Js code, user will be redirected to another page on page load.
</div>

<script>
	
	window.location.replace("https://marketqna.com/blog/how-to-check-element-or-p-tag-is-visible-or-not-using-jquery/");

	
</script>

</body>
</html>

In the above code, we have written JavaScript redirection code, which is used for redirecting users to another page. When this page is loaded the user will be automatically redirected to mentioned URL.

Thank you for reading the article, share your love in the comment section and add this website to your bookmark, as we are sharing learning articles regularly.

2 thoughts on “How to redirect user from one page to another”

Leave a Comment

Your email address will not be published. Required fields are marked *