The HTML http-equiv attribute within the <meta> tag is used to instruct the browser to treat these as actual HTTP headers sent from the server.
Definition and Usage
➔ The HTTP-equiv attribute can be used to simulate an HTTP response header.
➔ The http-equiv attribute is always used together with a content attribute.
➔ If the server sends an actual HTTP header, it will usually override the http-equiv meta tag.
➔ It is recommended to configure HTTP headers at the server level if possible, rather than in the http-equiv meta tag.
Attributes and values
➔ The http-equiv attribute supports these values:
- content-security-policy: Defines a Content Security Policy (CSP) for the page to prevent cross-site scripting (XSS) and other attacks.
Ex: <meta http-equiv="content-security-policy" content="default-src 'self';">
- http-equiv="Content-Security-Policy": Specifies the tag as a CSP policy.
- content="": content attribute contains the policy directives.
- refresh: The page is automatically reloaded or redirected to a different URL after the refresh period.
- content-type: Character encoding and MIME type of the document.
- default-style: Specifies the default CSS style.
Common Directives-src for content attribute.
➔ default-src: Defines fallbacks for other directives (e.g., default-src 'self').
➔ script-src: Controls the script (e.g., script-src 'self' https://mytrustedsite.com).
➔ img-src: Controls the image (e.g., img-src 'self' https://mysiteimages.com).
➔ style-src: Controls the stylesheet (e.g., style-src 'self').
➔ connect-src: Controls the connection (e.g., fetch(), WebSocket).
➔ object-src: Controls the plugin (e.g., object-src 'none').
➔ font-src: Controls the font.
Common directive-src values for content attribute.
➔ 'self': Same origin.
➔ *: Any origin.
➔ https://mytrustedsite.com: Specific domain.
➔ 'unsafe-inline': Allows inline scripts/styles.
➔ 'nonce-nonce_value': For trusted inline scripts/styles.
Syntax
//In HTML
<head>
<meta http-equiv="refresh" content="30">
<meta id="metaId" http-equiv="refresh" content="30;url=https://w3context.com">
<meta http-equiv="content-security-policy"
content="default-src 'self'; script-src 'self' https://mytrustedsite.com">
</head>
//In JavaScript
<script>
//Dynamically creating and adding a meta element to head section.
const metaElement = document.createElement('meta');
metaElement.httpEquiv = 'refresh';
metaElement.content = '5;url=https://yourdomain.com';
metaElement.setAttribute('http-equiv', 'Content-Security-Policy');
metaElement.setAttribute('content', 'default-src self;');
document.head.appendChild(link);
//Setting httpEquiv on existing meta element in head section.
let element = document.querySelector("#metaId");
element.httpEquiv = 'refresh';
element.content = '5;url=https://yourdomain.com';
//element.setAttribute('http-equiv', 'refresh');
//element.setAttribute('content', '5;url=https://yourdomain.com');
</script>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML http-equiv attribute example</title>
<style>
.mydiv {
border: 2px solid black;
padding: 30px;
background: rgb(100, 100, 100, 0.3);
}
input {
padding: 3px;
}
button {
margin: 10px 75px;
padding: 3px;
}
</style>
<meta http-equiv="refresh" content="30">
<meta http-equiv="refresh" content="30;url=https://w3context.com">
<meta http-equiv="content-security-policy"
content="default-src 'self'; script-src 'self' https://mytrustedsite.com">
</head>
<body>
<div class="mydiv">
<h3>HTML http-equiv attribute example</h3>
<p>The HTTP-equiv attribute is used to simulate an HTTP response header.</p>
<br>
<p><b>Note:</b> If the server sends an actual HTTP header, it will usually override the http-equiv meta tag.</p>
<p>It is recommended to configure HTTP headers at the server level if possible, rather than in the http-equiv
meta tag.</p>
</div>
</body>
</html>
Click on the "Try it Now" button to see how it works.