HTTP-Equiv: What Is It Used For?

What is http-equiv?

The http-equiv attribute is essentially used to simulate an HTTP response header. You may be asking yourself, "Why would I need http-equiv if I can just define a response header in my server's configuration?" Well, not everyone has access to their server's configuration. This can be true if you're using shared hosting where the hosting company makes server config changes on your behalf or you just don't have the credentials to access the server's config.

Therefore, the http-equiv attribute can be used within a meta element to define certain settings that would otherwise require the use of an HTTP response header.

http-equiv values

There are a few ways to use the http-equiv attribute. A couple of popular values include content-type and refresh. content-type specifies the character encoding for the document. This was much more widely used in HTML4 and resembled the following:

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

However, now with the majority of the web using HTML5, the use of content-type is obsolete therefore allowing you to define the character encoding for a document with the following:

<meta charset="UTF-8">

Other values that can be used with the http-equiv attribute include:

• content-security-policy
• content-length
• content-encoding
• default-style
• window-target

Certain values that used to be valid, such as set-cookie and content-language, are now obsolete with http-equiv. Before using an http-equiv value, ensure you research whether or not there is a better way to implement what you are trying to achieve, as with the content-type character encoding example above. Additionally, it should be noted that the http-equiv attribute does not take precedence or override HTTP response headers. Therefore, adding the http-equiv attribute to your HTML document is only beneficial if the HTTP response header isn't already being sent via the origin server.

Examples

If you're curious to see how the http-equiv can be used in practice, the following section shows three separate use cases of how the attribute can be implemented.

refresh

With the refresh value, you can define a time period for which you want the document to reload. In the example below, the document would be set to refresh every 30 seconds.

<meta http-equiv="refresh" content="30">

content-security-policy

The content-security-policy value allows you to define which sources are approved for the browser to load. The example below allows for any resource to be loaded from the current domain as well as any subdomain of example.com.

<meta http-equiv="content-security-policy" content="default-src 'self' *.example.com">

default-style

The default-style value specifies what the preferred style sheet to use is. The value of the content attribute must match the value of a <link> element in the same document in order for this to be valid.

<meta http-equiv="default-style" content="/style.css">

The examples above are just a few ways you can use the http-equiv attribute. Obviously, if you have access to the server's configuration files then you can replicate the examples above and much more without requiring the use of http-equiv.

Summary

The http-equiv, also known as an HTTP response header equivalent, can be useful to those who don't have access to an origin server's configuration files but still need to make certain modifications. Although not all values are valid as they once were, using this attribute can still be useful in certain situations. Furthermore, this attribute is supported by all major browsers, therefore no matter which browser your client is using, the content value should be enforceable given the value is not obsolete.