<meta>: The Document-level Metadata element

The HTML <meta> element represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> or <title>.

Content categories Metadata content. If the itemprop attribute is present: flow content, phrasing content.
Permitted content None, it is an empty element.
Tag omission As it is a void element, the start tag must be present and the end tag must not be present.
Permitted parents <meta charset>, <meta http-equiv>: a <head> element. If the http-equiv is not an encoding declaration, it can also be inside a <noscript> element, itself inside a <head> element.
Permitted ARIA roles None
DOM interface HTMLMetaElement

Attributes

This element includes the global attributes.

Note: the attribute name has a specific meaning for the <meta> element, and the itemprop attribute must not be set on the same <meta> element that has any existing name, http-equiv or charset attributes.

charset
This attribute declares the page's character encoding. It must contain a standard IANA MIME name for character encodings. Although the standard doesn't request a specific encoding, it suggests:
  • Authors are encouraged to use UTF-8.
  • Authors should not use ASCII-incompatible encodings to avoid security risk: browsers not supporting them may interpret harmful content as HTML. This happens with the JIS_C6226-1983, JIS_X0212-1990, HZ-GB-2312, JOHAB, the ISO-2022 family and the EBCDIC family.

Note: ASCII-incompatible encodings are those that don't map the 8-bit code points 0x20 to 0x7E to the 0x0020 to 0x007E Unicode code points.

  • Authors must not use CESU-8, UTF-7, BOCU-1 and/or SCSU as cross-site scripting attacks with these encodings have been demonstrated.
  • Authors should not use UTF-32 because not all HTML5 encoding algorithms can distinguish it from UTF-16.
Notes:
  • The declared character encoding must match the one the page was saved with to avoid garbled characters and security holes.
  • The <meta> element declaring the encoding must be inside the <head> element and within the first 1024 bytes of the HTML as some browsers only look at those bytes before choosing an encoding.
  • This <meta> element is only one part of the algorithm to determine a page's character set. The Content-Type header and any Byte-Order Marks override this element.
  • It is strongly recommended to define the character encoding. If a page's encoding is undefined, cross-scripting techniques are possible, such as the UTF-7 fallback cross-scripting technique.
  • The <meta> element with a charset attribute is a synonym for the pre-HTML5 <meta http-equiv="Content-Type" content="text/html; charset=IANAcharset">, where IANAcharset contains the value of the equivalent charset attribute. This syntax is still allowed, although no longer recommended.
content
This attribute contains the value for the http-equiv or name attribute, depending on which is used.
http-equiv
Defines a pragma directive. The attribute is named http-equiv(alent) because all the allowed values are names of particular HTTP headers:
  • content-language
    Defines the default language of the page. It can be overridden by the lang attribute on any element.

    Warning: Do not use this value, as it is obsolete. Prefer the lang attribute on the <html> element.

  • content-security-policy
    Allows page authors to define a content policy for the current page. Content policies mostly specify allowed server origins and script endpoints which help guard against cross-site scripting attacks.
  • content-type
    Defines the MIME type of the document, followed by its character encoding. It follows the same syntax as the HTTP content-type entity-header field, but as it is inside a HTML page, most values other than text/html are impossible. Therefore the valid syntax for its content is the string 'text/html' followed by a character set with the following syntax: '; charset=IANAcharset', where IANAcharset is the preferred MIME name for a character set as defined by the IANA.

    Warning: Do not use this value, as it is obsolete. Use the charset attribute on the <meta> element.

    Note: As <meta> can't change documents' types in XHTML or HTML5's XHTML serialization, never set the MIME type to an XHTML MIME type with <meta>.

  • refresh
    This instruction specifies:
    • The number of seconds until the page should be reloaded - only if the content attribute contains a positive integer.
    • The number of seconds until the page should redirect to another - only if the content attribute contains a positive integer followed by the string ';url=', and a valid URL.
  • set-cookie
    Defines a cookie for the page. Its content must follow the syntax defined in the IETF HTTP Cookie Specification.

    Warning: Do not use this instruction, as it is obsolete. Use the HTTP header Set-Cookie instead. It was removed from the standard, and is no longer supported at all in Firefox 68 and Chrome 65.

name

This attribute defines the name of a piece of document-level metadata. It should not be set if one of the attributes itemprop, http-equiv or charset is also set.

This metadata name is associated with the value contained by the content attribute. The possible values for the name attribute are:

  • application-name which defines the name of the application running in the web page.
    Note:
    • Browsers may use this to identify the application. It is different from the <title> element, which usually contain the application name, but may also contain information like the document name or a status.
    • Simple web pages shouldn't define an application-name.
  • author which defines the name of the document's author.
  • description which contains a short and accurate summary of the content of the page. Several browsers, like Firefox and Opera, use this as the default description of bookmarked pages.
  • generator which contains the identifier of the software that generated the page.
  • keywords which contains words relevant to the page's content separated by commas.
  • referrer which controls the HTTP Referer header attached to requests sent from the document:
    Values for the content attribute of <meta name="referrer">
    no-referrer Do not send a HTTP Referer header.
    origin Send the origin of the document.
    no-referrer-when-downgrade Send the full URL when the destination is at least as secure as the current page (HTTP(S)→HTTPS), but send no referrer when it's less secure (HTTPS→HTTP). This is the default behaviour.
    origin-when-cross-origin Send the full URL (stripped of parameters) for same-origin requests, but only send the origin for other cases.
    same-origin Send the full URL (stripped of parameters) for same-origin requests. Cross-origin requests will contain no referrer header.
    strict-origin Send the origin when the destination is at least as secure as the current page (HTTP(S)→HTTPS), but send no referrer when it's less secure (HTTPS→HTTP).
    strict-origin-when-cross-origin Send the full URL (stripped of parameters) for same-origin requests. Send the origin when the destination is at least as secure as the current page (HTTP(S)→HTTPS). Otherwise, send no referrer.
    unsafe-URL Send the full URL (stripped of parameters) for same-origin or cross-origin requests.
    Notes:
    • Dynamically inserting <meta name="referrer"> (with document.write() or appendChild()) makes the referrer behaviour unpredictable.
    • When several conflicting policies are defined, the no-referrer policy is applied.
  • theme-color which indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface. The content attribute contains a valid CSS <color>.
  • color-scheme:

    Specifies one or more color schemes with which the document is compatible. The browser will use this information in tandem with the user's browser or device settings to determine what colors to use for everything from background and foregrounds to form controls and scrollbars. The primary use for <meta name="color-scheme"> is to indicate compatibility with—and order of preference for—light and dark color modes.

    The value of the content property for color-scheme may be one of the following:

    normal
    The document is unaware of color schemes and should simply be rendered using the default color palette.
    [light | dark]+
    One or more color schemes supported by the document. Specifying the same color scheme more than once has the same effect as specifying it only once. Indicating multiple color schemes indicates that the first scheme is preferred by the document, but that the second specified scheme is acceptable if the user prefers it.
    only light
    Indicates that the document only supports light mode, with a light background and dark foreground colors. By specification, only dark is not valid, because forcing a document to render in dark mode when it isn't truly compatible with it can result in unreadable content; all major browsers default to light mode if not otherwise configured.

    For example, to indicate that a document prefers dark mode but does render functionally in light mode as well:

    <meta name="color-scheme" content="dark light">

    This works at the document level in the same way that the CSS color-scheme property lets individual elements specify their preferred and accepted color schemes. Your styles can adapt to the current color scheme using the prefers-color-scheme CSS media feature.

This attribute may also have a value taken from the extended list defined on WHATWG Wiki MetaExtensions page. Although none have been formally accepted yet, a few commonly used names are:

  • creator which defines the name of the creator of the document, such as an organization or institution. If there are more than one, several <meta> elements should be used.
  • googlebot, a synonym of robots, is only followed by Googlebot (the indexing crawler for Google).
  • publisher which defines the name of the document's publisher.
  • robots which defines the behaviour that cooperative crawlers, or "robots", should use with the page. It is a comma-separated list of the values below:
    Values for the content of <meta name="robots">
    Value Description Used by
    index Allows the robot to index the page (default). All
    noindex Requests the robot to not index the page. All
    follow Allows the robot to follow the links on the page (default). All
    nofollow Requests the robot to not follow the links on the page. All
    none Equivalent to noindex, nofollow Google
    noarchive Requests the search engine not to cache the page content. Google, Yahoo, Bing
    nosnippet Prevents displaying any description of the page in search engine results. Google, Bing
    noimageindex Requests this page not to appear as the referring page of an indexed image. Google
    nocache Synonym of noarchive. Bing
    Notes:
    • Only cooperative robots follow these rules. Do not expect to prevent e-mail harvesters with them.
    • The robot still needs to access the page in order to read these rules. To prevent bandwidth consumption, use a robots.txt file.
    • If you want to remove a page, noindex will work, but only after the robot visits the page again. Ensure that the robots.txt file is not preventing revisits.
    • Some values are mutually exclusive, like index and noindex, or follow and nofollow. In these cases the robot's behaviour is undefined and may vary between them.
    • Some crawler robots, like Google, Yahoo and Bing, support the same values for the HTTP header X-Robots-Tag; this allows non-HTML documents like images to use these rules.
  • slurp, is a synonym of robots, but only for Slurp - the crawler for Yahoo Search.
  • viewport, which gives hints about the size of the initial size of the viewport. Used by mobile devices only.
    Values for the content of <meta name="viewport">
    Value Possible subvalues Description
    width A positive integer number, or the text device-width Defines the pixel width of the viewport that you want the web site to be rendered at.
    height A positive integer, or the text device-height Defines the height of the viewport. Not used by any browser.
    initial-scale A positive number between 0.0 and 10.0 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 Defines the maximum amount to zoom in. It must be greater or equal to the minimum-scale or the behaviour is undefined. Browser settings can ignore this rule and iOS10+ ignores it by default.
    minimum-scale A positive number between 0.0 and 10.0 Defines the minimum zoom level. It must be smaller or equal to the maximum-scale or the behaviour is undefined. Browser settings can ignore this rule and iOS10+ ignores it by default.
    user-scalable yes or no If set to no, the user is not able to zoom in the webpage. The default is yes. Browser settings can ignore this rule, and iOS10+ ignores it by default.
    viewport-fit auto, contain or cover

    The auto value doesn’t affect the initial layout viewport, and the whole web page is viewable.

    The contain value means that the viewport is scaled to fit the largest rectangle inscribed within the display.

    The cover value means that the viewport is scaled to fill the device display. It is highly recommended to make use of the safe area inset variables to ensure that important content doesn't end up outside the display.
    Specification Status Comment
    CSS Device Adaptation
    The definition of '<meta name="viewport">' in that specification.    		 Working Draft Non-normatively describes the Viewport META element
    See also: @viewport
    Notes:
    • Though unstandardized, this declaration is respected by most mobile browsers due to de-facto dominance.
    • The default values may vary between devices and browsers.
    • To learn about this declaration in Firefox for Mobile, see this article.
scheme
This attribute defines the scheme in which metadata is described. A scheme is a context leading to the correct interpretations of the content value, like a format.

Warning: Do not use this value, as it is obsolete. There is no replacement as there was no real usage for it.

Notes

Depending on the attributes set, the kind of metadata can be one of the following:

  • If name is set, it is document-level metadata, applying to the whole page.
  • If http-equiv is set, it is a pragma directive — information normally given by the web server about how the web page is served.
  • If charset is set, it is a charset declaration — the character encoding used by the webpage.
  • If itemprop is set, it is user-defined metadata — transparent for the user-agent as the semantics of the metadata is user-specific.

Examples

<meta charset="utf-8">

<!-- Redirect page after 3 seconds -->
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">

Accessibility concerns

Refreshing content

Pages set with a refresh value run the risk of having the time interval being too short. People navigating with the aid of assistive technology such as a screen reader may be unable to read through and understand the page's content before being automatically redirected. The abrupt, unannounced updating of the page content may also be disorienting for people experiencing low vision conditions.

Viewport scaling

Disabling zooming capabilities by setting user-scalable to a value of no prevents people experiencing low vision conditions from being able to read and understand page content.

Specifications

Specification Status Comment
Referrer Policy
The definition of '<meta name="referrer">' in that specification.		 Candidate Recommendation Defines values and semantics of <meta name="referrer">.
HTML Living Standard
The definition of '<meta>' in that specification.		 Living Standard Added itemprop attribute
HTML5
The definition of '<meta>' in that specification.		 Recommendation Added charset attribute
HTML 4.01 Specification
The definition of '<meta>' in that specification.		 Recommendation

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
metaChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
charsetChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
contentChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
http-equivChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
nameChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
Argomenti correlati
  1. <base>
  2. <head>
  3. <link>
  4. <meta>
  5. <style>
  6. <title>
  7. HTML Elements
    1. A
      1. <a>
      2. <abbr>
      3. <acronym>
      4. <address>
      5. <applet>
      6. <area>
      7. <article>
      8. <aside>
      9. <audio>
    2. B
      1. <b>
      2. <base>
      3. <basefont>
      4. <bdi>
      5. <bdo>
      6. <bgsound>
      7. <big>
      8. <blink>
      9. <blockquote>
      10. <body>
      11. <br>
      12. <button>
    3. C
      1. <canvas>
      2. <caption>
      3. <center>
      4. <cite>
      5. <code>
      6. <col>
      7. <colgroup>
      8. <content>
    4. D
      1. <data>
      2. <datalist>
      3. <dd>
      4. <del>
      5. <details>
      6. <dfn>
      7. <dialog>
      8. <dir>
      9. <div>
      10. <dl>
      11. <dt>
    5. E
      1. <em>
      2. <embed>
    6. F
      1. <fieldset>
      2. <figcaption>
      3. <figure>
      4. <font>
      5. <footer>
      6. <form>
      7. <frame>
      8. <frameset>
    7. G H
      1. <h1>
      2. <h2>
      3. <h3>
      4. <h4>
      5. <h5>
      6. <h6>
      7. <head>
      8. <header>
      9. <hgroup>
      10. <hr>
      11. <html>
    8. I
      1. <i>
      2. <iframe>
      3. <img>
      4. <input>
      5. <ins>
      6. <isindex>
    9. J K
      1. <kbd>
      2. <keygen>
    10. L
      1. <label>
      2. <legend>
      3. <li>
      4. <link>
      5. <listing>
    11. M
      1. <main>
      2. <map>
      3. <mark>
      4. <marquee>
      5. <menu>
      6. <menuitem>
      7. <meta>
      8. <meter>
    12. N
      1. <nav>
      2. <nobr>
      3. <noframes>
      4. <noscript>
    13. O
      1. <object>
      2. <ol>
      3. <optgroup>
      4. <option>
      5. <output>
    14. P
      1. <p>
      2. <param>
      3. <picture>
      4. <plaintext>
      5. <pre>
      6. <progress>
    15. Q
      1. <q>
    16. R
      1. <rp>
      2. <rt>
      3. <rtc>
      4. <ruby>
    17. S
      1. <s>
      2. <samp>
      3. <script>
      4. <section>
      5. <select>
      6. <shadow>
      7. <slot>
      8. <small>
      9. <source>
      10. <spacer>
      11. <span>
      12. <strike>
      13. <strong>
      14. <style>
      15. <sub>
      16. <summary>
      17. <sup>
    18. T
      1. <table>
      2. <tbody>
      3. <td>
      4. <template>
      5. <textarea>
      6. <tfoot>
      7. <th>
      8. <thead>
      9. <time>
      10. <title>
      11. <tr>
      12. <track>
      13. <tt>
    19. U
      1. <u>
      2. <ul>
    20. V
      1. <var>
      2. <video>
    21. W
      1. <wbr>
    22. X Y Z
      1. <xmp>