The
<meta>tag provides metadata about the HTML document. Metadata is information that does not display directly on the page, but is used by browsers, search engines, and other services.
Common uses include specifying the character set, page description, keywords, author, and viewport settings for responsive design.The
<meta>tag must be placed inside the<head>section.
Syntax
<meta charset="UTF-8">
<meta name="description" content="This is an example of meta description">
<meta name="viewport" content="width=device-width, initial-scale=1.0">Attributes
| Attribute | Description |
|---|---|
charset | Specifies the character encoding for the document (e.g., UTF-8). |
name | Defines the metadata name (e.g., description, keywords, author). |
content | Provides the value for the metadata name attribute. |
http-equiv | Simulates HTTP headers (e.g., refresh, X-UA-Compatible). |
Example
<!DOCTYPE html>
<html>
<head>
<title>Meta Tag Example</title>
<meta charset="UTF-8">
<meta name="description" content="This page demonstrates the use of meta tags.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This page uses meta tags to provide metadata for browsers and search engines.</p>
</body>
</html>Output
Browser Output
There is no visible output for this specific tag.
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
The <meta> tag does not produce visible content but provides important information for SEO, character encoding, and responsive behavior.
Notes
- The
<meta>tag is self-closing and does not require an end tag. - Must be placed inside the
<head>section. - Helps browsers render content correctly and search engines index pages accurately.
- Common uses: character encoding (
charset), page description (name="description"), and viewport settings for responsive design.
Conclusion
The <meta> tag is a key component of HTML documents for defining metadata, character encoding, and responsive design settings.
Although it is invisible on the page, it plays a crucial role in SEO, accessibility, and proper rendering of the webpage.
