How To Redirect HTML Web Page Into Another URL?


HTML is a language used to build web pages. Web pages have a dynamic nature where it can change during time. One of the most popular change cases is redirecting given web page to another web page. This is simply called we page redirect. In this tutorial, we will examine the redirect process in different ways, languages, and technologies.

HTML Redirect

The most popular and basic for web page redirect is using HTML. HTML has two main parts named <head> and <body> . We can provide some special tags into <head> in order to redirect HTML page. We will use <meta> tag with detailed attributes. In this example, we will redirect to https://www.poftut.com . We will use http-equiv attribute with refresh value.

<meta http-equiv="refresh" content="0; URL='https://poftut.com'" />

JavaScript Redirect

JavaScript is client-side technology which can make dynamic changes after or during HTML page load. JavaScript language provides window.location object which is used to get and set current page URL.

windows.location="https://www.poftut.com";

OR JavaScript provides different mechanisms to change or redirect HTML web page.

windows.location="https://www.poftut.com";

windows.location.href="https://www.poftut.com";

windows.location.assign("https://www.poftut.com");

windows.location.replace("https://www.poftut.com");

Apache Redirect

Apache is a popular web server. We can redirect a page by using Apache on the server side. We can use Redirect or RedirectMatch directives to redirect web pages completely or specifically.

We can redirect pages starting with /blog

RedirectMatch 301 /blog(.*) https://www.poftut.com$1

Or we can redirect specific web page like page.html in the following example.

Redirect 301 /page.html https://www.poftut.com/new-page.html

Nginx Redirect

Nginx is another popular web server used to serve web pages. It can redirect web pages using return directive. This can be also used to redirect http web pages to the https versions.

server {

   listen 80;

   server_name poftut.com;

   return 301 $scheme://poftut.com$request_uri;

}

Lighttpd Redirect

Lighttpd is a web server used to server light we sites. We can use  mode_redirect module and its url.redirect function to redirect HTML web pages. In this example, we will redirect http://www.poftut.com into https://www.poftut.com .

server.modules = ( "mod_redirect" ) 

$HTTP["host"] =~ "^(www\.)?poftut.com$" { 
   url.redirect = ( "^/(.*)$" => "https://www.poftut.com/$1", ) 
}

PHP Redirect

PHP provides the HTML redirect features with header() function. Actually header() function will insert HTML meta tag into the HTTP response. header() usage is very simple where we just provide the Location: with the URL we want to redirect.

<?php 
   header('Location: http://www.new-website.com'); 
   exit; 
?>

Ruby on Rails Redirect

Ruby on Rails provides ApplicationController class which can be used inherit into our class. We can use index function and put redirect_to function for redirection.

class WelcomeController < ApplicationController 
   def index 
      redirect_to 'http://poftut.com', :status => :moved_permanently 
   end 
end

.Net Redirect

.Net provides languages like C# and Visual Basic. We can use Reponse class and its functions Redirect() and attributes Status , AddHeader.

Response.Redirect("http://www.poftut.com");

OR

Response.Status = "301 Moved Permanently"; 

Response.AddHeader("Location", "http://www.poftut.com");

OR

Response.RedirectPermanent("http://www.poftut.com")

Node.js Redirect

Node.js provides writeHead() function with http library. We can redirect into http with the following code.

var http = require("http"); 

http.createServer(function(req, res) { 
   res.writeHead(301,{Location: 'http://www.poftut.com'}); 
   res.end(); 
}).listen(80);

Flask Redirect

Flask is a python framework which uses app.route() and provides redirect() .

@app.route('/notes/<page>') 
def thing(page): 
   return redirect("http://www.poftut.com/blog/" + page, code=301)

Golang Redirect

Golang provides net/http library which provides http.HandleFunc() to handle HTTP response and using Redirect() function to write the new redirect URL.

package main 

import "net/http" 

func main() { 
   http.HandleFunc("/", func (wr http.ResponseWriter, req *http.Request) { 
   http.Redirect(wr, req, "http://poftut.com", http.StatusMovedPermanently) 
   }) 
}

LEARN MORE  What Is HTTP (Hypertext Transfer Protocol)?

2 thoughts on “How To Redirect HTML Web Page Into Another URL?”

  1. There is two type of redirections which are 301 and 302. Generally, 301 redirections are used in case of any 404 error we use the 301 redirections. It can be done by changes in the header files. It can be also done with simple plugins.

    Reply
  2. It’s remarkable designed for me to have a website, which is good in support
    of my know-how. thanks admin

    Reply

Leave a Comment