HTML Tags
HTML <meta> Tag
The <meta> tag provides metadata about an HTML document, such as its character encoding, viewport settings, and description for search engines. It is a void element placed in the <head>.
The <meta> Tag
The <meta> element represents metadata that cannot be expressed by other head elements like <title> or <link>. Common uses include declaring the character set, controlling the mobile viewport, and providing a description and keywords for search engines and social platforms.
It is a void element (no closing tag) and always lives in the <head>. A document can have many <meta> elements, each describing one piece of metadata.
Syntax
<meta charset="UTF-8" />
<meta name="description" content="A short page summary" />Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Learn HTML with runnable examples." />
<title>Meta Tag Demo</title>
</head>
<body>
<h1>Open the tab title and view source to see the meta tags.</h1>
</body>
</html>More Examples
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Jane Developer" />
<meta name="robots" content="index, follow" />
<meta property="og:title" content="My Great Article" />
<title>Social and SEO Meta</title>
</head>
<body>
<h1>These meta tags control SEO and social previews.</h1>
</body>
</html>Attributes
| Attribute | Description |
|---|---|
| charset | Declares the character encoding, almost always UTF-8. |
| name | The metadata name, for example description, keywords, viewport, author, robots. |
| content | The value associated with the name or http-equiv. |
| http-equiv | Provides an HTTP header-like directive, such as content-type or refresh. |
| property | Used by Open Graph and similar protocols, for example og:title. |
Always include <meta charset="UTF-8"> and the viewport meta tag. The viewport tag is essential for responsive design on mobile devices.
Key Takeaways
- <meta> defines document metadata inside <head>.
- It is a void element with no closing tag.
- charset sets the encoding; use UTF-8.
- The viewport meta tag is required for responsive mobile pages.
- name/content pairs power SEO and social previews.