There may be times when you need to redirect your web traffic to a new site. There are multiple ways to perform a redirect, usually through the backend, but in this article we cover how to do it using a client side redirect in HTML.
This redirect takes place in the head of your HTML document, in a meta tag. The syntax for this redirect gives us the ability to delay before the browser redirects to a new web page.
The syntax for for this redirect is as follows:
<head>
<meta http-equiv="refresh" content="<num seconds>; url=<site to redirect to>">
</head>The http-equiv attribute basically simulates an HTTP response header, which allows for the refresh to happen. The content attribute consists of the num of seconds to delay the refresh in case you want to send a message to a user before the page redirects (i.e. bookmark the new page because the site has moved permanently, site is down temporarily and you’re taking them to another version of site).
Remember that time is measured in seconds, but many things in the web development world are measured in milliseconds. If you put 1,000 in as the time for this redirect, you or your client will wait a long while before the page actually redirects.
The second half of the content attribute is the URL you will be directing to. This all takes place in the head of the HTML page.
Here’s how it looks on an actual HTML document:
html>
<head>
<head> <meta http-equiv="refresh" content="1; url=https://www.careerkarma.com/blog/html"> </head>
<style>
body {
font-family: 'Roboto';
margin: 20px;
}
p {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
You are being redirect to <a rel="noreferrer noopener" href="https://careerkarma.com/blog/html">http://www.careerkarma.com/blog/html.</a> Please click this link if not redirected in five seconds
</body>
</html>If you don’t have the ability to use a backend to perform a redirect, definitely take this option into consideration!
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
