HTML <meta> Element
The HTML <meta> element provides metadata about an HTML document, such as its character encoding, page description, viewport settings, and other information used by browsers, search engines, and web services.
Syntax
<meta name="description" content="A description of the webpage.">The <meta> element is a void element and does not use a closing tag. Its attributes determine the type of metadata being provided and its value.
Attributes
The <meta> element supports the global HTML attributes and the following element-specific attributes:
| Attribute | Description |
|---|---|
charset |
Specifies the character encoding used by the HTML document. |
content |
Provides the value associated with metadata defined by the name or http-equiv attribute. |
http-equiv |
Defines a pragma directive that can affect how the document is processed. |
name |
Specifies the name of the metadata whose value is supplied by the content attribute. |
Example
This example shows several common <meta> elements placed inside the document's <head>, including the character encoding, page description, and viewport settings.
<head>
<meta charset="utf-8">
<meta name="description" content="Learn the basics of HTML.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML Tutorial</title>
</head>Usage Notes
The <meta> element is normally placed inside the document's <head> and provides information that is not displayed as regular page content.
The character encoding is commonly declared with <meta charset="utf-8">. Declaring the encoding helps the browser interpret characters in the document correctly.
The name="description" metadata provides a short description of the page. Search engines may use this information when creating a search result snippet, although the displayed snippet can be generated from other page content instead.
The viewport declaration <meta name="viewport" content="width=device-width, initial-scale=1"> is commonly used so responsive webpages are displayed at an appropriate width on mobile devices.
A document can contain multiple <meta> elements because each one can provide a different type of metadata.
Accessibility
Most metadata does not appear directly in the visible webpage, but some metadata can affect accessibility. Correct character encoding helps ensure text is interpreted properly, while an appropriate viewport configuration allows responsive layouts to work correctly on mobile devices.
Avoid viewport settings that prevent users from zooming or significantly restrict page magnification. Users may depend on browser zoom to make text and other content easier to see.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <meta> Element .
Related Elements
The <meta> element is closely related to the <head> element that contains document metadata, the <title> element that defines the document title, the <link> element that defines relationships to external resources, and the <base> element that establishes a base URL for relative URLs.