You can use metadata in your header to send messages to web browsers about how they should display (or otherwise handle) your web pages. Web builders commonly use the element this way to redirect page visitors from one page to another automatically.
For example, if you’ve ever come across a page that reads This page has moved. Please wait 10 seconds to be automatically sent to the new location. (or something similar), you’ve seen this trick at work.
To use the element to send messages to the browser, here are the general steps you need to follow:
Use the http-equiv attribute in place of the name attribute.
Choose from a predefined list of values that represent instructions for the browser.
These values use instructions that you can send to a browser in the HTTP header, but changing the HTTP header for a document is harder than embedding the instructions into the web page itself.
To instruct a browser to redirect users from one page to another, here’s what you need to do in particular:
Use the element with http-equiv="refresh".
Adjust the value of the content attribute to specify how many seconds before the refresh happens and what URL you want to access.
For example, the element line in the following markup creates a refresh that jumps to www.w3.org after 15 seconds:
<!DOCTYPE html>
<html>
<head>
<title>All About Markup</title>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="15; url=http://www.w3.org/">
</head>
<body>
<p>This page is still in development. Until we are done, please visit
the <a href="http://www.w3.org">W3C Website</a> for the definitive
collection of markup-related resources.
</p>
<p>Please wait 10 seconds to be automatically redirected to the W3C.</p>
</body>
</html>
Use metadata with caution when redirecting a web page. When some search engines see metadata redirects in use, they may assume the site is trying to create spam. This could result in your website or page being delisted, or removed from a search engine’s listings.
When you become a pro at using metadata to redirect, you can step up to the next level and try redirecting using HTTP status code 301 to force a server-based redirect from an *.htaccess file located in the root directory on your web server.
Older web browsers may not know what to do with elements that use the http-equiv element to redirect a page. Be sure to include some text and a link on the page so a visitor can link manually to your new target page if your element fails to work.
If a user’s browser doesn’t know what to do with your redirect, the user simply clicks a link, like the one shown in this figure, on the page to go to the new page.
When you use a element to redirect a page, include a link in case the redirect fails.
You can use the http-equiv attribute with the element for a variety of purposes, such as setting an expiration date for a page. To find out more about what your http-equiv options are (and how to use them), check out the Dictionary of HTML META Tags.
