HTML5 <meta> Tag

The HTML <meta> tag is used to represent any metadata information that cannot be represented by one of the other HTML meta-related elements (<base>, <link>, <script>, <style> or <title>).

No content permitted inside the <meta> tag as it is a void element. The start tag is mandatory for this element but there must be no closing tag.

Here is an example of using this tag:

<!-- In HTML5 -->
<meta charset="utf-8">

<!-- Reload the page after every 60 seconds -->
<meta http-equiv="refresh" content="60">

<!-- Redirect page after 3 seconds -->
<meta http-equiv="refresh" content="3;url=http://tutorialio.com">

Attributes

charset

This attribute declares the character encoding used of the page. It can be locally overridden using the lang attribute on any element. This attribute is a literal string and must be one of the preferred MIME names for a character encoding as defined by the IANA. Though the standard doesn’t request a specific character encoding, it encourages authors to to use UTF-8.

content

This attribute gives the value associated with the http-equiv or name attribute, depending on the context.

http-equiv

This enumerated attribute defines the pragma that can alter servers and user-agents behavior. The value of the pragma is defined using the content and can be one of the following:

  • "Content-Security-Policy": This value allows web site administrators to define content policies for served resources. With a few exceptions, policies mostly involve specifiying server origins and script endpoints. This helps guard against cross-site scripting attacks.

  • "default-style": This pragma specifies the preferred stylesheet to be used on the page. The content attribute must contain the title of a <link> element whose href attribute links to a CSS stylesheet, or the title of a <style> element which contains a CSS stylesheet.

  • "refresh" This pragma specifies: the number of seconds until the page should be reloaded, if the content attribute contains only a positive integer number or the number of seconds until the page should be redirected to another, (if the content attribute contains a positive integer number followed by the string ‘;url=’ and a valid URL).

name

This attribute defines the name of document-level metadata. It should not be set if one of the attributes itemprop, http-equiv or charset is also set.
This document-level metadata name is associated with a value, contained by the content attribute. The possible values for the name element are, with their associated value, stored via the content attribute:

  • application-name: defining the name of the web application running in the webpage. Browsers may use this to identify the application. It is different from the <title> element, which usually consist of the application name but may also contain specific information like the document name or a status. Simple webpages shouldn’t define the application-name meta.
  • author: defining, in a free format, the name of the author of the document;
  • description: containing a short and accurate summary of the content of the page. Several browsers, among them Firefox and Opera, use this meta as the default description of the page when bookmarked;
    generator, containing, in a free format, the identifier to the software that generated the page;
  • keywords: containing, as strings separated by commas, relevant words associated with the content of the page;
  • referrer: controlling the content of the HTTP Referer HTTP header attached to any request sent from this document. Values for the content attribute of <meta name="referrer"> are:

    • no-referrer: Do not send a HTTP Referer header.
    • origin: Send the origin of the document.
    • no-referrer-when-downgrade: Send the origin as referrer to a-priori as-much-secure destination (https->https), but doesn’t send a referrer to a less secure destination (https->http). This is the default behavior.
    • origin-when-crossorigin: Send a full URL (stripped from parameters) when performing a same-origin request, but only send the origin of the document for other cases.
    • unsafe-URL: Send a full URL (stripped from parameters) when performing a same-origin or cross-origin request.

    Dynamically inserting (by document.write or appendChild) create a non-determinism when it comes to sending referrers or not. Note also that when several conflicting policies are defined, the No-referrer policy is applied.

Although none of the following have been formally accepted yet, a few commonly used names are among the proposals:

  • creator: defining, in a free format, the name of the creator of the document. Note that it can be the name of the institution. If there are more than one, several elements should be used;
  • googlebot: which is a synonym of robots, but is only followed by Googlebot, the indexing crawler for Google;
  • publisher: defining, in a free format, the name of the publisher of the document. Note that it can be the name of the institution;
  • robots: defining the behavior that cooperative crawlers should have with the page. It is a comma-separated list of values from the following list:

    • index: Allows the robot to index the page All
    • noindex: Prevents the robot from indexing the page All
    • follow: Allows the robot to follow the links on the page All
    • nofollow: Prevents the robot from following the links on the page All
    • noodp: Prevents the usage of the Open Directory Project description, if any, as the description of the page in the search engine results page
      [Google, Yahoo, Bing].
    • noarchive: Prevents the search engine from caching the content of the page [Google, Yahoo].
    • nosnippet: Prevents the display of any description of the page in the search engine results page [Google].
    • noimageindex: Prevents this page from appearing as the referring page of an indexed image [Google].
    • nocache: Synonym of noarchive [Bing].

    Only cooperative robots will follow the rules defined by the robots name. Do not expect to keep e-mail harvesters at bay with this. The robot still needs to access the page in order to read the meta value. If you want to keep them at bay, for example to prevent bandwidth consumption, use a robots.txt file instead (or in complement).

Finally a few names are in common use, though not in the process of being standardized:

  • viewport: which gives hints about the size of the initial size of the viewport. This pragma is used by several mobile devices only. Values for the content of <meta name="viewport"> are:

    • width: a positive integer number that defines the width, in pixels, of the viewport.
    • height: a positive integer number that defines the height, in pixels, of the viewport.
    • initial-scale: a positive number between 0.0 and 10.0 that defines the ratio between the device width (device-width in portrait mode or device-height in landscape mode) and the viewport size.
    • maximum-scale: a positive number between 0.0 and 10.0 that defines the maximum value of the zoom. It must be greater or equal to the minimum-scale or the behavior is indeterminate.
    • minimum-scale: a positive number between 0.0 and 10.0 that defines the minimum value of the zoom. It must be smaller or equal to the maximum-scale or the behavior is indeterminate.
    • user-scalable: a boolean value (yes or no). If set to no, the user is not able to zoom in the webpage. Default value is yes.

    Though not standardized, this attribute is used by different mobile browsers like Safari Mobile, Firefox for Mobile or Opera Mobile. The default values may change from one device, and browser, to another.

Further Reading

  1. Read more about the HTML <meta> element on MDN.
  2. You can also read the HTML <meta> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top