HTML Tags
HTML <meta> Tag
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.
Syntax
html
<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
html
<!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
html
There is no visible output for this specific tag.Browser Support
Chrome | Edge | Firefox | 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.