Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Get the HTTP header for the information of the content attribute in HTML
The http-equiv attribute in HTML is used within <meta> tags to simulate HTTP response headers. It provides metadata that would normally be sent by a web server, allowing you to control browser behavior and document properties directly from the HTML.
The http-equiv attribute works in conjunction with the content attribute to specify both the header name and its value. This is particularly useful for setting refresh intervals, character encoding, cache control, and other HTTP-like directives.
Syntax
Following is the syntax for the http-equiv attribute −
<meta http-equiv="header-name" content="header-value">
Where header-name is the HTTP header to simulate and header-value is the corresponding value for that header.
Common HTTP-Equiv Values
Following are the most commonly used http-equiv values −
refresh − Automatically refreshes or redirects the page after a specified time interval.
content-type − Specifies the character encoding of the document (though HTML5 prefers the
charsetattribute).cache-control − Controls how browsers cache the document.
expires − Sets an expiration date for the document cache.
pragma − Provides cache control directives for older browsers.
Example − Page Refresh
Following example demonstrates how to use http-equiv to automatically refresh a page every 10 seconds −
<!DOCTYPE html>
<html>
<head>
<title>HTML http-equiv Attribute - Refresh</title>
<meta name="keywords" content="HTML, meta tag, metadata">
<meta name="description" content="Description of the document">
<meta http-equiv="refresh" content="10">
</head>
<body style="font-family: Arial, sans-serif; background-color: #f0f0f0; padding: 20px;">
<h1>Auto-Refresh Example</h1>
<p>This page will automatically refresh every 10 seconds.</p>
<p>Current time: <span id="time"></span></p>
<script>
document.getElementById('time').textContent = new Date().toLocaleTimeString();
</script>
</body>
</html>
The page automatically refreshes every 10 seconds, displaying the updated time with each refresh.
Example − Page Redirect
Following example shows how to redirect users to another page after 5 seconds −
<!DOCTYPE html> <html> <head> <title>HTML http-equiv Attribute - Redirect</title> <meta http-equiv="refresh" content="5; url=https://www.tutorialspoint.com"> </head> <body style="font-family: Arial, sans-serif; background-color: #e8f4fd; padding: 20px; text-align: center;"> <h1>Redirect Example</h1> <p>You will be redirected to TutorialsPoint in 5 seconds...</p> <p>If you are not redirected automatically, <a href="https://www.tutorialspoint.com">click here</a>.</p> </body> </html>
After 5 seconds, the browser automatically redirects to the specified URL. The content format is "seconds; url=destination".
Example − Cache Control
Following example demonstrates cache control using http-equiv −
<!DOCTYPE html>
<html>
<head>
<title>HTML http-equiv Attribute - Cache Control</title>
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
<body style="font-family: Arial, sans-serif; background-color: #fff3cd; padding: 20px;">
<h1>Cache Control Example</h1>
<p>This page has cache control headers that prevent browsers from caching it.</p>
<p>The page will always be fetched fresh from the server.</p>
<p>Load time: <span id="loadTime"></span></p>
<script>
document.getElementById('loadTime').textContent = new Date().toLocaleString();
</script>
</body>
</html>
These meta tags prevent the browser from caching the page, ensuring it is always loaded fresh from the server.
Common HTTP-Equiv Attributes
Following table shows the most commonly used http-equiv values and their purposes −
| HTTP-Equiv Value | Content Example | Purpose |
|---|---|---|
| refresh |
30 or 5; url=page.html
|
Auto-refresh page or redirect after specified seconds |
| content-type | text/html; charset=UTF-8 |
Specify document MIME type and character encoding |
| cache-control |
no-cache or max-age=3600
|
Control browser caching behavior |
| expires | Wed, 01 Jan 2025 00:00:00 GMT |
Set expiration date for cached content |
| pragma | no-cache |
Backward-compatible cache control for older browsers |
| x-ua-compatible | IE=edge |
Specify Internet Explorer compatibility mode |
Browser Compatibility
The http-equiv attribute is supported by all modern browsers. However, some values like refresh for redirection are not recommended for accessibility reasons, as they can be disorienting for users with screen readers. Consider using JavaScript-based solutions for better user control.
Conclusion
The http-equiv attribute allows you to simulate HTTP headers directly in HTML, providing control over browser behavior like page refresh, caching, and redirects. While powerful, use it judiciously as some values can impact user experience and accessibility. For modern web development, prefer server-side HTTP headers when possible.
344 Views
