meta element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

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 value representing 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.

  • 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.

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/">
      

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

Specific attributes

name

The name in a name-value pair composed by this attribute and the content attribute. There's a number of standard names defined in HTML5:

  • 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.

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.

Example

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

http-equiv

A value indicating the type of pragma directive the element represents. There are three case-insensitive possible values:

  • content-type: The character set used by the document but preceded by the string "text/html; charset=".
  • default-style: The name of the default stylesheet used for rendering the document. It 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: The number of seconds the user agent should wait before automatically redirecting the user to another page. The values can be set in two ways:
    • A positive integer, defining the number of seconds to wait before reloading the page.
    • A positive integer, defining the number of seconds to wait, followed by the string "; URL=") and the URL where the user agent should redirect the user after the specified time.

Example

<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">

content

The value in a pair composed by this attribute and one of the two attributes name and http-equiv. Possible values depend on the context and are specified in the descriptions of the attributes name and http-equiv.

Example

<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">

charset

The character set used by the document.

Example

<meta charset="utf-8">

scheme

A string with additional information to help browsers understand the properties declared by the element.

This attribute has been removed from the HTML5 standard. Authors should now rely only on the HTML5 wiki (PragmaExtensions Wiki page and MetaExtensions Wiki page).

Example

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

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.