Standardista

CSS3, JavaScript and HTML5 explained

http-equiv: the meta attribute explained

The http-equiv attribute is used by servers to gather information about a page using the HTTP header. The meta tag’s http-equiv attribute set is similar to a http header. The attribute lets you to send additional information to the browser in the http header. I rarely use any http-equiv meta elements other than content-type, and had never really thought about them for any purpose other than caching, So, as I looked deeper into the possible values, I thought I would “share”. There isn’t as much depth to this post as my usual endeavors, but hopefully this will make a good resource to bookmark.

Structure of Meta Element

The structure of the meta element is:

<meta http-equiv="value" content="value" />

Do not include the name attribute in the meta when the http-equiv attribute is included.

Do include the content attribute. Below are the various values for the http-equiv attribute:

Values for http-equiv

<meta http-equiv=”content-type” content=”type; charset=charset” />
http-equiv=”content-type” indicates the type of data sent to the browser, enabling the browsers to know what to do with data received. The <meta> element, in all its forms, are optional. Content-type is the one you really don’t want to omit. For English sites use <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />. There are many other possible values for content, such as <meta http-equiv=”content-type” content=”text/html; charset=ISO-2022-JP” /> for Japanese sites.
<meta http-equiv=”expires” content=”date” />
The date indicates the date and time that the document is set to expire. When the date is reached, the document will be reloaded even if the document is stored in the cache. This <meta> element is used to disable caching of the document: simply put a date that has passed in the date, and this will cause the browser to fetch new files. Put a date far into the future if you want the page to be cached. Note that IE6 will fetch the content of a users home page when a new browser window is opened, even if you set it to cache.

<meta http-equiv=”set-cookie” content=”name=value; expires=date; path=url“” />
The name is the name of the cookie.The value is the value to be set for that named cookie. The date is the date and time when the cookie will be deleted from the the computer. The date is optional. If you don’t include an expiration date and time, the cookie will be deleted when you exit the browser. You can include more than one http-equiv=”set-cookie” if you need to set more than one cookie name/value pair.
<meta http-equiv=”content-encoding” content=”data encoding” />
Indicates the encoding of the returned data; usually the compression type. For g-zipped documents, use <meta http-equiv=”content-encoding” content=”gzip” />
<meta http-equiv=”allow” content=”methods” />
Supposedly you include methods supported by server, but I’ve never seen this in action.
<meta http-equiv=”date” content=”date” />
Include the date and time that the page was created.
<meta http-equiv=”last-modified” content=”date” />
The content is the date and time the page was last modified.
<meta http-equiv=”location” content=”n; url” />
<meta http-equiv=”refresh” content=”n;url=url” />
ex. <meta http-equiv=”refresh” content=”12″ />
ex. <meta http-equiv=”refresh” content=”3;url=http://www.evotech.net/blog” />n is the interval at which time the page should be refreshed: in our example, the page will refresh every 12 seconds. If included, url is the location the page will redirect to. Our second example would cause the page to redirect to Community MX after 3 seconds. Please do NOT use this method to redirect to a new URL. It is not accessible.

<meta http-equiv=”window-target” content=”location” />
The http-equiv=”window-target” specifies the “named window” of the current page. The main use is to prevent a page from appearing inside another framed page: <meta http-equiv=”window-target” content=”_top” />. Usually this means that the Web browser will force the page to go the top frameset.

<meta http-equiv=”www-authenticate” content=”" />
http-equiv=”www-authenticate” is one method of providing basic access authentication, but providing such authentication in such a visible manner is not recommended for security reasons.
<meta http-equiv=”pics-label” content=’labellist‘ />
The Platform for Internet Content Selection (PICS) is a standard for labeling online content: basically online content rating. To generate the labelist, visit safesurf or another labellist generator. Note that the content attribute uses single quotes, because the PICS label syntax uses double quotes.

<meta http-equiv=”pragma” content=”option” />
<meta http-equiv=”cache-control” content=”option” />
You can use the http-equiv=”expires” with a past date to ensure that the browser retrieves fresh files from the server (rather than caching). Since not all client browsers and caching devices (e.g. proxy servers) are known to successfully implement all no-caching options, include multiple no-caching options, including:

<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="cache-control" content="no-store" />
<meta http-equiv=”content-language” content=”language-Country” />
Enables language specification, enabling search engines to accurately categorize the document into language and country. The language is the main language code, and the country is the country where the dialect of the language is more specific, such as en-US versus en-GB, US English versus English spoken in Great Britain. <meta http-equiv=”content-language” content=”de-AT” /> would be German as is spoken in Austria.

<meta http-equiv=”content-script-type” content=”language“>
The default script language for the script element is javascript. If you aren’t using JavaScript as your default, declare <meta http-equiv=”content-script-type” content=”text/VBscript”> informs the browser which type of scripting language you are using by default: is this case, Visual Basic.

<meta http-equiv=”page-enter” content=”revealtrans(duration=seconds,transition=num)” />
<meta http-equiv=”page-exit” content=”revealtrans(duration=seconds,transition=num)” />
Page-enter and page-exit are Microsoft proprietary transitions that only work in Internet Explorer. The seconds is how long the transition should take, and num is an integer between 0 and 23, correlated with a specific type of transition (23 is random).<meta http-equiv=”page-enter” content=”revealtrans(duration=2,transition=6)”>. There are 23 transitions, from 0 – 22. A transition with value of 23 is allows Internet Explorer to randomly select from the 23 available transitions. <meta http-equiv=”page-enter” content=”blendTrans(duration=sec)” /> is another value.

<meta http-equiv=”imagetoolbar” content=”no”>
Another IE specific (which means you shouldn’t use it) http-equiv value is “imagetoolbar”. In some versions of Internet Explorer, when an image is hovered, an image toolbar appears. <meta http-equiv=”imagetoolbar” content=”no”> enables the disabling of the image toolbar.

Notes:

  • The following characters appearing within the content must be escaped using SGML entities:
    single quote
    & & ampersand
    > > greater than
  • Note: Dates take the following format:
    Thu, 25 Nov 2008 16:15:30 GMT

5 Responses to “http-equiv: the meta attribute explained”

  1. Christoph Dum says:

    nice site you got here

    but there’s one tiny mistake i’ve noticed:

    http-equiv=”content-language” :

    de-AU is wrong – AU is Australia

    de-AT is german, spoken in Austria

  2. Raanan Avidor says:

    Any idea why http://validator.w3.org fail validating this?

    HelloWorld

  3. Raanan Avidor says:

    Hmmm, HTML code was stripped away :)
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=”utf-8″ />

    <title>HelloWorld</title>
    <meta http-equiv=”cache-control” content=”no-cache” />
    <meta http-equiv=”expires” content=”0″ />
    <meta http-equiv=”pragma” content=”no-cache” />
    </head>
    <body>
    <div>HelloWorld</div>
    </body>
    </html>

  4. Neil Ormsby says:

    Hi, I have designed my website in html5 and I am very pleased.
    The mark up validates but I need to make the website more mobile friendly.
    I have checked it in: http://validator.w3.org/mobile/ and it is 84% so I am very happy.

    The cache-control meta tags above fail the html5 validator check, so what can I use to have valid mark up and also to improve the mobile aspect as well.

    I get confused if things get too technical so I need some help.

    Regards Neil.

Leave a Reply