1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
<header><h1><meta>: The metadata element</h1></header><div class="section-content">
<p>The <code><meta></code> <a href="../index">HTML</a> element represents <a href="https://developer.mozilla.org/en-US/docs/Glossary/Metadata">metadata</a> that cannot be represented by other HTML meta-related elements, like <a href="base"><code><base></code></a>, <a href="link"><code><link></code></a>, <a href="script"><code><script></code></a>, <a href="style"><code><style></code></a> or <a href="title"><code><title></code></a>.</p> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#metadata_content">Metadata content</a>. If the <a href="../global_attributes/itemprop"><code>itemprop</code></a> attribute is present: <a href="../content_categories#flow_content">flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th>Permitted content</th> <td>None; it is a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void element</a>.</td> </tr> <tr> <th>Tag omission</th> <td> As it is a void element, the start tag must be present and the end tag must not be present. </td> </tr> <tr> <th>Permitted parents</th> <td> <ul> <li> <code><meta charset></code>, <code><meta http-equiv></code>: a <a href="head"><code><head></code></a> element. If the <a href="meta#http-equiv" aria-current="page"><code>http-equiv</code></a> is not an encoding declaration, it can also be inside a <a href="noscript"><code><noscript></code></a> element, itself inside a <code><head></code> element. </li> <li> <code><meta name></code>: any element that accepts <a href="../content_categories#metadata_content">metadata content</a>. </li> <li> <code><meta itemprop></code>: any element that accepts <a href="../content_categories#metadata_content">metadata content</a> or <a href="../content_categories#flow_content">flow content</a>. </li> </ul> </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th>DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMetaElement"><code>HTMLMetaElement</code></a></td> </tr> </tbody> </table></div></figure> <p>The type of metadata provided by the <code><meta></code> element can be one of the following:</p> <ul> <li>If the <a href="#name"><code>name</code></a> attribute is set, the <code><meta></code> element provides <em>document-level metadata</em>, applying to the whole page.</li> <li>If the <a href="#http-equiv"><code>http-equiv</code></a> attribute is set, the <code><meta></code> element is a <em>pragma directive</em>, providing information equivalent to what can be given by a similarly-named HTTP header.</li> <li>If the <a href="#charset"><code>charset</code></a> attribute is set, the <code><meta></code> element is a <em>charset declaration</em>, giving the character encoding in which the document is encoded.</li> <li>If the <a href="../global_attributes/itemprop"><code>itemprop</code></a> attribute is set, the <code><meta></code> element provides <em>user-defined metadata</em>.</li> </ul>
</div>
<h2 id="attributes">Attributes</h2>
<div class="section-content">
<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> the attribute <a href="#name"><code>name</code></a> has a specific meaning for the <code><meta></code> element, and the <a href="../global_attributes/itemprop"><code>itemprop</code></a> attribute must not be set on the same <code><meta></code> element that has any existing <a href="#name"><code>name</code></a>, <a href="#http-equiv"><code>http-equiv</code></a> or <a href="#charset"><code>charset</code></a> attributes.</p> </div> <dl> <dt id="charset"><a href="#charset"><code>charset</code></a></dt> <dd> <p>This attribute declares the document's character encoding. If the attribute is present, its value must be an ASCII case-insensitive match for the string <code>"utf-8"</code>, because UTF-8 is the only valid encoding for HTML5 documents. <code><meta></code> elements which declare a character encoding must be located entirely within the first 1024 bytes of the document.</p> </dd> <dt id="content"><a href="#content"><code>content</code></a></dt> <dd> <p>This attribute contains the value for the <a href="#http-equiv"><code>http-equiv</code></a> or <a href="#name"><code>name</code></a> attribute, depending on which is used.</p> </dd> <dt id="http-equiv"><a href="#http-equiv"><code>http-equiv</code></a></dt> <dd> <p>Defines a pragma directive. The attribute is named <code>http-equiv(alent)</code> because all the allowed values are names of particular HTTP headers:</p> <ul> <li> <code>content-security-policy</code> Allows page authors to define a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy">content policy</a> for the current page. Content policies mostly specify allowed server origins and script endpoints which help guard against cross-site scripting attacks. </li> <li> <code>content-type</code> Declares the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME type</a> and the document's character encoding. The <code>content</code> attribute must have the value <code>"text/html; charset=utf-8"</code> if specified. This is equivalent to a <code><meta></code> element with the <a href="#charset"><code>charset</code></a> attribute specified and carries the same restriction on placement within the document. <strong>Note:</strong> Can only be used in documents served with a <code>text/html</code> — not in documents served with an XML MIME type. </li> <li> <code>default-style</code> Sets the name of the default <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS style sheet</a> set. </li> <li> <code>x-ua-compatible</code> If specified, the <code>content</code> attribute must have the value <code>"IE=edge"</code>. User agents are required to ignore this pragma. </li> <li>
<code>refresh</code> This instruction specifies: <ul> <li>The number of seconds until the page should be reloaded - only if the <a href="#content"><code>content</code></a> attribute contains a non-negative integer.</li> <li>The number of seconds until the page should redirect to another - only if the <a href="#content"><code>content</code></a> attribute contains a non-negative integer followed by the string '<code>;url=</code>', and a valid URL.</li> </ul> <div class="notecard warning" id="sect2"> <p><strong>Warning:</strong></p> <p>Pages set with a <code>refresh</code> 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.</p> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.2_%E2%80%94_enough_time_provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.2 explanations</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#guideline_3.2_%E2%80%94_predictable_make_web_pages_appear_and_operate_in_predictable_ways">MDN Understanding WCAG, Guideline 3.2 explanations</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html" target="_blank">Understanding Success Criterion 2.2.1 | W3C Understanding WCAG 2.0</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html" target="_blank">Understanding Success Criterion 2.2.4 | W3C Understanding WCAG 2.0</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-no-extreme-changes-context.html" target="_blank">Understanding Success Criterion 3.2.5 | W3C Understanding WCAG 2.0</a></li> </ul> </div> </li> </ul> </dd> <dt id="name"><a href="#name"><code>name</code></a></dt> <dd> <p>The <code>name</code> and <code>content</code> attributes can be used together to provide document metadata in terms of name-value pairs, with the <code>name</code> attribute giving the metadata name, and the <code>content</code> attribute giving the value.</p> <p>See <a href="meta/name">standard metadata names</a> for details about the set of standard metadata names defined in the HTML specification.</p> </dd> </dl>
</div>
<h2 id="examples">Examples</h2>
<div class="section-content"><div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="ZKxchLc9Rnwup9RkUsx2VD1dcdYZZLvhr67TzaYZpgM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token comment"><!-- Redirect page after 3 seconds --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>refresh<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3;url=https://www.mozilla.org<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
</pre>
</div></div>
<h2 id="specifications">Specifications</h2>
<div class="_table"><table class="standard-table">
<thead><tr><th scope="col">Specification</th></tr></thead>
<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/semantics.html#the-meta-element">HTML Standard <br><small># the-meta-element</small></a></td></tr></tbody>
</table></div>
<h2 id="browser_compatibility">Browser compatibility</h2>
<div class="_table"><table>
<thead>
<tr id="bct-browser-type">
<th></th>
<th colspan="6">Desktop</th>
<th colspan="6">Mobile</th>
</tr>
<tr id="bct-browsers">
<th></th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
<th>WebView Android</th>
<th>Chrome Android</th>
<th>Firefox for Android</th>
<th>Opera Android</th>
<th>Safari on IOS</th>
<th>Samsung Internet</th>
</tr>
</thead>
<tbody>
<tr>
<th><code>meta</code></th>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">Yes</td>
<td class="bc-supports-yes">≤12.1</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">≤12.1</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>charset</code></th>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">Yes</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">3</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">2</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>content</code></th>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">≤6</td>
<td class="bc-supports-yes">≤12.1</td>
<td class="bc-supports-yes">≤4</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">≤12.1</td>
<td class="bc-supports-yes">≤3.2</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>http-equiv</code></th>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">≤6</td>
<td class="bc-supports-yes">≤12.1</td>
<td class="bc-supports-yes">≤4</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">≤12.1</td>
<td class="bc-supports-yes">≤3.2</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>name</code></th>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">≤6</td>
<td class="bc-supports-yes">≤12.1</td>
<td class="bc-supports-yes">≤4</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">≤12.1</td>
<td class="bc-supports-yes">≤3.2</td>
<td class="bc-supports-yes">1.0</td>
</tr>
</tbody>
</table></div>
<h2 id="see_also">See also</h2>
<div class="section-content"><ul> <li><a href="meta/name">Standard metadata names</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#metadata_the_meta_element">Learn: <code><meta></code></a></li> <li><a href="../viewport_meta_tag">The viewport meta tag</a></li> </ul></div><div class="_attribution">
<p class="_attribution-p">
© 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta</a>
</p>
</div>
|
