<meta>: The META Element
Last updated: 2026-10-13
<meta>The META Element
Describes document metadata—charset, description, author, viewport—invisible on the page but vital for SEO and rendering.
| Category | Metadata |
|---|---|
| Content Model | Flow content |
| Allowed Parents | Any element that accepts flow content |
| Content Tag | Self-closing — no closing tag needed |
| Status | Standard |
📝 Syntax
<meta name="" content="">⚙️ Attributes
This element supports the global attributes plus the following:
| Attribute | Value | Description |
|---|---|---|
charset | Document character encoding, e.g. UTF-8 (best placed first in head). | |
name | Metadata name, e.g. description, keywords, author, viewport. | |
content | The value paired with name or http-equiv. | |
http-equiv | Emulates an HTTP response header, e.g. content-type, refresh. | |
property | Social card property, e.g. og:title (Open Graph). |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <meta> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： meta is a void element; place charset early to avoid mojibake.
❓ FAQ
QWhat are the common categories of meta configuration?
ACharset
<meta charset='UTF-8'>; viewport <meta name='viewport' content='width=device-width, initial-scale=1'>; SEO description name='description'; Open Graph sharing cards (og:title, og:image); robots index control (noindex/nofollow). Each category serves its own ecosystem.QWhy must meta charset be within the first 1024 bytes?
ABrowsers parse as a stream and decode the first bytes with the default encoding before reading the charset declaration — if multi-byte characters appear earlier and the encoding guess is wrong, mojibake occurs and cannot self-recover. Hence charset must be head's first element.
QWhat parameters can the viewport content hold?
ACommon ones:
width=device-width (follow device width), initial-scale=1 (initial zoom), maximum-scale/user-scalable (zoom limits — disabling zoom hurts accessibility, not recommended), viewport-fit=cover (notch-screen fit).🏷️ Related Tags
💡 Related Cases
More case studies coming soon — check back later.
📚 Related Tutorials
