meta element

Description

The meta element provides metadata that can't be expressed with other elements in the head, like title, base, link, style and script. This element can be used in three different ways.

With the charset attribute

In this case, the attribute must be alone and have a case-insensitive version of the string "utf-8", which represents the character set used by the document. There can only be one meta declaration with the charset attribute per document.

With the name attribute

The element provides document-level metadata organized in name-value pairs. The "name" in this pair is provided by the name attribute, while the "value" is provided by the content attribute in each case.

Below is a reference for the standard names that can be used for this purpose, and a description of what information the content attribute should provide. These names are all case-insensitive.

• application-name: the name of the web application this document represents. Translated names can be provided together with the lang attribute. There musn't be more that one meta application name for a specific language.
• author: the name of the document's author. Multiple authors can be declared with multiple meta declarations.
• description: a short description of the document or its purpose. There can be only one meta description in the document.
• generator: the name of one of the programs used to generate the document. Multiple generators can be declared with multiple meta declarations.
• keywords: a set of comma-separated tokens, each of which is a keyword describing in some way the contents of the document.
• referrer: the default referrer policy for the document, represented by any of the follwing values:
  • no-referrer: No information about the referrer is sent in all requests.
  • no-referrer-when-downgrade: A full URL is sent only in requests from a TLS-protected enviroment (HTTPS) to a potentially thrusworthy URL and from a not TLS-protected enviroment to anywhere.
  • same-origin: A full URL is sent only in requests made in the same origin.
  • origin: A URL composed by protocol, host and port is sent in all requests.
  • strict-origin: A URL composed by protocol, host and port is sent only in requests from a TLS-protected enviroment (HTTPS) to a potentially thrusworthy URL and from a not TLS-protected enviroment to anywhere.
  • origin-when-cross-origin: A full URL is sent in requests made in the same origin and a URL composed by protocol, host and port is sent in cross-origin requests.
  • strict-origin-when-cross-origin: A full URL is sent in requests made in the same origin and a URL composed by protocol, host and port is sent in cross-origin requests, only in requests from a TLS-protected enviroment (HTTPS) to a potentially thrusworthy URL and from a not TLS-protected enviroment to anywhere.
  • unsafe-url: A full URL is sent in all request.

  Note: the empty string, defaults to the value no-referrer.

• theme-color: a CSS color to be used by browsers as a suggestion to customize the display of the page or of the surrounding users interface. For example, a browser might color the page's title bar, or highlight a tab bar or task switcher. There musn't be more than one meta element with the name theme-color per document.
• color-scheme: an aid for browsers, to help them rendering the page background with the desired color scheme immediately (rather than waiting for all CSS in the page to load). The value for this declaration may be any of the following:
  • normal: The document isn't aware of color schemes and, thus, should be rendered with the browser's default color scheme.
  • light: Represents a light color scheme, with light background colors and dark foreground colors.
  • dark: Represents a dark color scheme, with dark background colors and light foreground colors.

Authors can create their own metadata names without requirements of any kind (optionally registering them at the WHATWG Wiki MetaExtensions page), except in the following situations:

• When the name or associated content is a URL. I such case, it's preferable to register it as a link type in the microformats wiki existing-rel-values page.
• When the metadata is expected to have processing requirements in browsers. In such case it should be standarized.

With the http-equiv attribute

The element represents a pragma directive and its type is declared in the http-equiv attribute. The values for its interpretation are defined in the content attribute.

There's a set of standard pragma directives that's described in the list below, where the name of each directive is associated to a description of how the value of the content attribute should be.

• content-type: this directive is an alternative to the meta declaration with the charset attribute. It specifies the character set used by the document but in this case, the value is preceded by the string "text/html; charset=".

  Example

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

• default-style: The name of the default stylesheet. Its value should match the title attribute of a link to an external style sheet or the title attribute of a style element. This directive is useful when there are more than one style sheets in a single document.
• refresh: sets the number of seconds the browser should wait before automatically redirecting the user to another page. The values can be set in two ways:
  • With a positive integer, defining the number of seconds to wait before reloading the page.
  • With a positive integer, defining the number of seconds to wait, followed by the string "; URL=") and the URL where the browser should redirect the user after the specified time.

    Example

    <meta http-equiv="refresh" content="60; URL=http://www.htmlquick.com/">
    

• content-security-policy: enforces a Content Security Policy on the document. The semi-colon separated list of directives may contain:
  • default-src: defines a default policy for loading all resources in the document.
  • script-src: indicates which scripts can be loaded.
  • object-src: indicates which plugins can be loaded.
  • style-src: defines which style sheets can be viewed.
  • img-src: defines which images can be loaded.
  • media-src: defines which media (audio and video) can be played.
  • frame-src: specifies which content can be inserted into a frame.
  • font-src: defines which fonts can be used.
  • connect-src: specifies which URIs can be loaded by scripts.
  • form-src: indicates which URIs can be used in the action attribute of forms.
  • script-nonce: requires the presence of nonce in script elements.
  • plugin-types: defines which types of plugins can be loaded.
  • reflected-xss: indicate if the browser should use heuristics to filter or block cross-site scripting attacks.

  A value can be assigned to any of these directives, that can be a URI, optionally with wildcards, or any of the following values, enclosed by single quotes: none, self, unsafe-inline or unsafe-eval.

  Example

  <meta http-equiv="content-security-policy" content="script-src 'self'; object-src 'none'; style-src https://styles.thissite.info">
  

A meta element must have one, and one only, of these four attributes: charset, name, http-equiv and itemprop.

The content attribute must be present when any of the attributes name, http-equiv and itemprop is used. In any other case, it should be omitted.

When the itemprop attribute is absent, this element can only be declared in the head of the document. Otherwise it can be declared elsewhere.

Examples

In the next example we'll be declaring a set of meta elements to provide the following information about the document: the character set used, two authors, a description and a scheduled redirection.

<head>
  <title>Overthrowing a galactic empire</title>
  <meta charset="utf-8">
  <meta name="author" content="Luke Skywalker">
  <meta name="author" content="Darth Vader">
  <meta name="description" content="Complete guide to overthrow a galactic empire, with representations and practical examples">
  <meta http-equiv="refresh" content="15; url=http://www.rebelscum.com/">
</head>

Attributes

<meta name="author" content="Master Yoda">
<meta name="description" content="Specifications for the X-wing spaceship with data, blueprints and pictures">

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="default-style" content="Main stylesheet">
<meta http-equiv="refresh" content="300; url=/classical/list.html">

<meta name="application-name" content="LinkScanner 2.0">
<meta name="description" content="Automatically scan all the links in a website without any intervention">
<meta http-equiv="refresh" content="90">

<meta charset="utf-8">

<meta name="date" content="2015-04-22" scheme="YYYY-MM-DD">
<meta name="code" content="0553293354" scheme="ISBN-10">

Events