<meta>
The <meta> HTML element represents metadata that cannot be represented by other meta-related elements, such as <base>, <link>, <script>, <style>, or <title>.
The type of metadata provided by the <meta> element can be one of the following:
If the name attribute is set, the <meta> element provides document-level metadata that applies to the whole page.
If the http-equiv attribute is set, the <meta> element acts as a pragma directive to simulate directives that could otherwise be given by an HTTP header.
If the charset attribute is set, the <meta> element is a charset declaration, giving the character encoding in which the document is encoded.
If the itemprop attribute is set, the <meta> element provides user-defined metadata.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| HTML attribute | ||||||
charset | 1 | 12 | 1 | 3 | 18 | 2 |
| The content attribute specifies the value of a metadata name defined by the name attribute. It takes a string as its value, and the expected syntax varies depending on the name value used. | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| The http-equiv attribute of the meta element allows you to provide processing instructions for the browser as if the response that returned the document included certain HTTP headers. The metadata is document-level metadata that applies to the whole page. | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| The name attribute of the meta element provides metadata in name-value pairs. When a element has a name attribute, a content attribute defines the corresponding value. The metadata is document-level metadata that applies to the whole page. | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| DOM API | ||||||
| The HTMLMetaElement interface contains descriptive metadata about a document provided in HTML as elements. This interface inherits all of the properties and methods described in the HTMLElement interface. | 1 | 12 | 1 | 1 | 18 | 1 |
| The HTMLMetaElement.content property gets or sets the content attribute of pragma directives and named meta data in conjunction with HTMLMetaElement.name or HTMLMetaElement.httpEquiv. For more information, see the content attribute. | 1 | 12 | 1 | 1 | 18 | 1 |
| The HTMLMetaElement.httpEquiv property gets or sets the pragma directive or an HTTP response header name for the HTMLMetaElement.content attribute. For more details on the possible values, see the http-equiv attribute. | 1 | 12 | 1 | 1 | 18 | 1 |
| The HTMLMetaElement.media property enables specifying the media for theme-color metadata. | 93 | 93 | 106 | 15 | 93 | 15 |
| The HTMLMetaElement.name property is used in combination with HTMLMetaElement.content to define the name-value pairs for the metadata of a document. The name attribute defines the metadata name and the content attribute defines the value. | 1 | 12 | 1 | 1 | 18 | 1 |
| Other | ||||||
html.elements.meta.http-equiv.content-type http-equiv="content-type" | ≤59 | 12 | 1 | ≤10.1 | ≤59 | ≤10.3 |
html.elements.meta.http-equiv.refresh http-equiv="refresh" | 1 | 12 | 1 | 1 | 18 | 1 |
| The referrer value for the name attribute of the meta element controls the HTTP Referer header of requests sent from the document. If specified, you define the referrer using a content attribute in the element as a keyword value. | 17 | 79 | 36 | 11.1 | 18 | 12 |
- Until Chrome 46, `content` values weren't constrained to the values listed in the spec.
- The `referrer` value wasn't taken into account when navigation was happening via the context menu or middle click until Firefox 39.
- Until Chrome Android 46, `content` values weren't constrained to the values listed in the spec.
Syntax
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ページの説明文">
<meta name="robots" content="index, follow">
<meta property="og:title" content="OGPタイトル">Live demo
Metadata vs content
Use a card to separate invisible metadata from visible document content.
Meta checklist
Keep metadata concise and focused on document behavior and discovery.
Use cases
-
Strengthen structure
Use <meta> to make the document outline, grouping, or semantics more explicit.
-
Improve meaning
Apply <meta> when clearer HTML structure helps users and tools understand the content.
Cautions
- Test <meta> in your target browsers and input environments before depending on it as a primary behavior.
Accessibility
- Prefer semantic structure that improves navigation and interpretation for assistive technologies, not just visual organization.