How to Redirect a Web Page in HTML | Learn in 1 Day FREE Tutorial

Last updated on 25th Jan 2022, Blog, Tutorials

(5.0) | 18596 Ratings 1955

Share:

• Introduction to HTML Redirect
• HTML Overview
• How to utilize JavaScript to divert an HTML page?
• About HTML Redirects
• How to divert from an HTML page?
• Step by step instructions to Redirect a Page to Another Page in HTML
• Fundamental HTTP Status Codes
• Elective Methods to Perform Redirects
• Features of HTML Redirect Page
• What is the utilization of the substance characteristic?
• Use Meta Refresh to Redirect in HTML
• Organizer redirection benefits
• Work area of redirection with HTML
• What is a divert?
• Kinds of sidetracks
• Advantages
• Disadvantages
• Redirection Benefits
• Pre-Requisties
• Conclusion

Introduction to HTML Redirect :-

The simplest method for having your clients naturally diverted from an old URL to another one is by utilizing an HTML Redirect. Regardless of whether you’ve changed your space name, rebuilt your site, or essentially revamped a portion of your site pages, staying away from the feared 404 Page-Not-Found mistake is foremost.



No matter what your justification for site changes, in this HTML Redirect instructional exercise, we’ll tell you through basic models the best way to unquestionably improve your site, while securing your client’s insight and the SEO you have worked over the long run.

HTML Overview :-

• HTML represents Hypertext Markup Language, and it is the most generally utilized language to compose Web Pages.
• Hypertext alludes to how Web pages (HTML archives) are connected. Consequently, the connection accessible on a site page is called Hypertext.
• As its name recommends, HTML is a Markup Language which implies you use HTML to just “increase” a text report with labels that advise a Web program how to structure it to show.
• Initially, HTML was created to characterize the design of archives like headings, sections, records, etc to work with the dividing of logical data among analysts. Presently, HTML is in effect generally used to design website pages with the assistance of various labels accessible in HTML language.

How to utilize JavaScript to divert an HTML page?

You may have experienced a circumstance where you clicked a URL to arrive at page X yet inside you were coordinated to another page Y. It occurs because of page redirection.

It is very easy to do a page divert utilizing JavaScript on the customer side. To divert your site guests to another page, you simply need to add a line in your mind segment.

About HTML Redirects :-

• HTML diverts are one of three methods that give directions to your guest’s internet browser to consequently take your client from the URL they entered into their program to the URL where your substance currently dwells.
• Thusly, you can resign an old HTML page and send clients to a spic and span HTML page completely

How to divert from an HTML page?

Page redirection is a circumstance where you clicked a URL to arrive at page X however inside you were coordinated to another page Y. It occurs because of page redirection.

To divert from an HTML page, utilize the META Tag. With this, utilization the HTTP-Equiv trait to give an HTTP header to the worth of the substance characteristic. The worth in the substance is the number of seconds; you need the page to divert later.

Learn Advanced HTML Certification Training Course to Build Your Skills

Weekday / Weekend BatchesSee Batch Details

Step by step instructions to Redirect a Page to Another Page in HTML :-

The least complex method for diverting to another URL is with the utilization of the meta revive tag. We can put this meta tag inside the <'head'> tag at the highest point of any HTML page, which resembles this:

What Is an HTML Redirect?

• The Best Guide
• By Aryan, GuptaLast refreshed on Oct 28, 2021160
• An HTML divert happens when a client enters a URL, yet it changes, and the program guides them to an alternate site page. Site designers depend on them when they need to change their site’s construction or the area of a specific page.

What Is an HTML divert?

• A divert is the point at which a page’s URL consequently changes to an alternate URL.
• This is helpful when you need to divert a page to another area; for instance, diverts are as often as possible utilized when organizations change their names and change their site URLs also.

Instructions to Redirect a Page to Another Page in HTML :-

• The least difficult method for diverting to another URL is with the utilization of the meta revive tag. We can put this meta tag inside the <'head'> tag at the highest point of any HTML page, which resembles this:
• The worth in the substance property is the number of seconds after which you need the page to divert. You can set the worth to zero for sure-fire stacking.

Divert to another URL :

To divert to another URL from the current page, you utilize the area object: location.href = ‘new_url’; Code language: (javascript) For instance: location.href = ‘https://www.javascripttutorial.net/’; Code language: (javascript)

Appointing a worth to the href property of the area object has a similar impact as calling the allot() technique for the area object:

location.assign(‘https://www.javascripttutorial.net/’); Code language: (javascript)

To divert to another URL without making another passage in the set of experiences pile of the program, you utilize the supplant() strategy for the area object:

location.replace(‘https://www.javascripttutorial.net/’); Redirect old page to new page HTML [duplicate]: An old site like this: www.example.com/oldnews.html Oldnews.html page changed to now newnews.html A new site like this: www.example.com/newnews.html At the point when type anyone www.example.com/oldnews.html consequently page diverted to new page => www.example.com/newnews.html

Fundamental HTTP Status Codes :-

What is HTTP?

HTTP is an abbreviation for Hyper Text Transfer Protocol. In basic terms, web advancements impart utilizing an HTTP Request/Response cycle.

For what reason is this Important for Redirects?

When working with web advances, it’s great to know the significance of somewhere around a couple of the numerous HTTP Status Codes that are returned when a client enters a URL into the program or for our situation diverts one site page URL to another.

Fundamental HTTP Status Codes for Redirects :-

HTTP Status Codes contain three digits with the principal number demonstrating reaction type (1xx – 5xx). Inside this square, there are many codes that you can learn after some time.Assuming we overlook for the second codes that begin with 1 (enlightening) and codes that begin with 5 (server-side) there is a little subset of the leftover codes that are fundamental to diverts:

• 200 – achievement
• 301 – super durable divert
• 302 – impermanent divert
• 404 – page not found



Our objective in diverts is to get 200 (our site page stacked effectively) and stay away from 404 (our site page couldn’t be found). If our substance has been for all time moved, we need our divert system to send the program a 301-status code (known as a super durable divert). On the off chance that our substance is just briefly dwelling at an alternate area, we need our divert system to send the program a 302-status code (known as an impermanent divert).

Elective Methods to Perform Redirects :-

While HTML sidetracks might be the most straightforward method for performing diverts, it isn’t the main way or even awesome. As we referenced in the opening “About HTML Redirects” area, there are two alternate ways of characterizing redirections. The two different strategies are:

1. HTTP Redirects

2. JavaScript Redirects

• HTTP-Equiv: Used to reproduce an HTTP reaction header. To divert the client to another page, this will be set to Refresh
• Content: Specifies the accompanying

Features of HTML Redirect Page :-

On the off chance that you are searching for a straightforward strategy, we propose the Meta Refresh tag to divert the URL. All that you need to do is to put this HTML divert meta tag inside the. You might look at the code fragment to perceive how we have accomplished this.

<'meta http-equiv="refresh" content="0; URL='http://www.your-new-webiste.com'"/''> Markup Duplicate

What is the utilization of the substance characteristic?

• We utilize this to set postponement before you divert to the new page. By setting this to nothing, you ensure that the HTML auto-divert is consistent and speedy. As may be obvious, we are not setting an HTTP status code as it isn’t needed.
• Notwithstanding, we request that you be cautious with every one of the end and opening statements as it very well may be truly confounding. Ensure that you hit the nail on the head.
• Despite this strategy being the simplest method for accomplishing the HTML divert page, it accompanies its cons. You ought to know about the way that a few programs probably won’t be excessively inviting to the Meta revive tag. Now and again, clients will observe ablaze just before HTML redirection to another page.
• Something else you should remember is that the back button may be debilitated in more seasoned programs because of this META tag. To put it plainly, it isn’t at every one of them an optimal arrangement. For a similar explanation, it is put more down regularly than not.
• So you are searching for a more secure option in contrast to this? All things considered, we propose JavaScript. HTML divert to another page can be executed rapidly with JavaScript.
• There are different HTML approaches to re-highway a client on the off chance that a server goes down or is under support. It relies upon the business necessity upon what kind of divert conduct the site ought to have.
• Dealing with diverts in the UI improves the presentation, as website page HTML will be quick to get delivered. How about we start with going through HTML approaches to diverting to an alternate website page.

Get JOB Oriented HTML Training for Beginners By MNC Experts

• Instructor-led Sessions
• Real-life Case Studies
• Assignments

Explore Curriculum

Use Meta Refresh to Redirect in HTML :-

In HTML, we have the <'meta'> label that is perceived by the program. Utilizing this HTML tag, we can request that the program diverts to the referenced page. It likewise permits us to program a deferral assuming we wish to.
<'meta http-equiv="refresh" content="5;url=https://www.delftstack.com"/''>
• Here, two or three boundaries are incorporated, the http-equiv and the substance.
• HTTP-Equiv: is like an HTTP demand header, sending extra data for the program to comprehend. This characteristic acknowledges different qualities. The most generally utilized one is the substance type that advises the program of the kind of content to anticipate. invigorate is one more incentive for HTTP-Equiv, which advises the program to explore the connection determined in the substance quality.
• Content: incorporates a programmable deferral (in a moment or two) to tell the client that they are being diverted. If they wish to proceed, they can or remain back without being diverted. Also, the URL is the connection to which the route ought to be finished.

Organizer redirection benefits :-

It gives the accompanying advantages:

• Diminished logon time. Envelope Redirection diminishes the time it takes to sign on to and log off from the organization when contrasted with Roaming Profiles.
• Client archives accessible from any PC. To guarantee that client reports are accessible when they wander starting with one PC then onto the next, Folder Redirection diverts client archives to a server that are available from any PC associated with the space.
• Client reports accessible when not associated with the corporate organization. Envelope Redirection can be utilized with Offline Files innovation to make client organizers accessible when they are separated from the corporate organization.
• Expanded security and accessibility of client information. Envelope Redirection stores the information on a common organization server that is supported each day. This ensures client information and requires no activity on the client-side. Client information is ensured when the PC working framework should be reinstalled or on the other hand assuming PC equipment should be supplanted.

Work area of redirection with HTML :-

The “Work area” and “Top choices” are organizers ordinarily contained in your profile (about a profile definition if it’s not too much trouble, see note toward the finish of the page), either wandering or neighborhood.

At CERN we have seen that “Work area” normally will in general be a few times very huge, as the client keeps archives on it and no quantity is applied to this organizer.

One benefit of involving the Desktop as an information vault is that the data is upheld. In any case, tragically this conduct can make login and logoff amazingly sluggish on the off chance that you have a meandering profile dynamic (actually look at status here).

To keep both decent highlights you can have your “Work area” on an organization share free of the area of your windows profile. While you won’t experience the ill effects of tedious logon and logoff, your data will in any case be upheld.

What is a divert?

A divert is a method for sending the two clients and web indexes to an alternate URL from the one they initially mentioned. The three most ordinarily utilized sidetracks are 301, 302, and Meta Refresh.

Kinds of sidetracks :-

• 301, “Moved Permanently”- suggested for SEO
• 302, “Found” or “Moved Temporarily”
• Meta Refresh

301 moved for all time:

• A 301 divert is an extremely durable divert that passes full connection value (positioning capacity) to the diverted page.
• 301 alludes to the HTTP status code for this sort of divert. In many cases, the 301 divert is the best strategy for executing diverts on a site.

302 found:

• Utilize 302 sidetracks when the URL of an asset is changed briefly. A portion of Google’s representatives have shown that there are situations where 301s and 302s might be dealt with in basically the same manner, yet our proof recommends that the most secure method for guaranteeing web search tools and programs of different types give full credit is to utilize a 301 when forever diverting URLs.
• This is because while in principle both 302s and 301s can both pass a similar measure of connection value, there are situations where a 301 may pass a more grounded canonicalization sign to Google. For cases in which the divert genuinely is brief, a 302 might be the most suitable.

307 moved briefly:

• A 307 divert is the HTTP 1.1 replacement of the 302 divert. While the significant crawlers will deal with it like a 302 at times, it is ideal to utilize a 301 for practically all cases. The special case for this is when content is truly moved just for a brief time, (for example, during upkeep) AND the server has as of now been recognized by the web indexes as 1.1 viable.
• Since it’s difficult to decide if the web search tools have distinguished a page as viable, it is for the most part best to involve a 302 divert for content that has been briefly moved.

Advantages :-

• HTML is generally utilized.
• Each program upholds HTML Language.
• Simple to learn and utilize.
• HTML is light weighted and quick to stack.
• Try not to get to buy any additional product since it’s natural in each window.
• Simple to utilize
• Free language structure (although, being too adaptable won’t suit guidelines).
• HTML is adequately simple to compose
• HTML is that it is not difficult to code in any event, for amateur software engineers.
• HTML likewise permits the use of layouts, which makes planning a page simple.
• Exceptionally valuable for novices in the web planning field.
• HTML can be upheld to every single program, on the off chance that not upheld to every one of the programs.
• HTML is based on pretty much every site, on the off chance that not all sites.
• HTML is progressively utilized for information stockpiling as like XML sentence structure.
• Free – You want not to buy any product.
• HTML is available in each window naturally so you do not have to purchase the product which costs excessively.
• HTML has many tags and characteristics which can shorten your line of code.

Disadvantages :-

• It can’t deliver dynamic results alone, since it’s a static language.
• Making the construction of HTML records becomes intense to comprehend.
• Mistakes can be exorbitant.
• It is the tedious as the time it consumes to keep up with the shading plan of a page and to make records, tables, and structures.
• It can make just static and plain pages so if we’d like unique pages then HTML isn’t valuable.
• Needed to compose a ton of code for making a straightforward page.
• We need to check up the deplored labels and affirm not to utilize them to seem because one more language that works with HTML has supplanted the primary work of the tag, and henceforth the contrary language should be perceived and educated.
• Security highlights presented by HTML are restricted.
• If we want to record long code for making a website page, it delivers some intricacy.
• HTML can make just static and plain pages so if we’d like powerful pages then HTML isn’t valuable.
• I want to record huge loads of code for making a simple page.
• Security highlights are bad at HTML.
• If we might want to record long code for making a site page, it delivers some intricacy.

Redirection Benefits :-

• Decreased logon time.
• Client records accessible from any PC.
• Client reports accessible when not associated with the corporate organization.
• Expanded security and accessibility of user date.

Pre-Requisties :-

Before continuing with this instructional exercise, you are relied upon to be available to pose inquiries and settle any further questions on the theme by reaching us.

HTML Sample Resumes! Download & Edit, Get Noticed by Top Employers! Download

Conclusion :-

There are many justifications for why you should give URL redirection and send individuals to another page – including flawlessly changing to another space, rebuilding your current site, guiding guests to a protected variant of your site (from http://example.com to https://example.com), permitting individuals to get to your site from numerous area names (there are presently above and beyond 1000 area augmentations it’s developing), and numerous different situations.