HTML <meta> Tag – Metadata & Page Settings
📌 Introduction
The <meta> tag provides metadata about your webpage.
Metadata is information about the page, not content displayed on it.
It is placed inside the <head> section and helps browsers and search engines understand your page.
🧱 Basic Syntax
<meta name="value" content="information" />
Or:
<meta charset="UTF-8" />
💡 Common Examples
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Learn HTML step by step" />
<meta name="keywords" content="HTML, CSS, Web Development" />
<meta name="author" content="anyName" />
</head>
🔍 Important <meta> Tags Explained
1. Character Encoding
<meta charset="UTF-8" />
✔ Supports all languages and symbols ✔ Must be included in every page
2. Viewport (Responsive Design)
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
✔ Makes your website mobile-friendly ✔ Controls how content scales on different devices
3. Description (SEO)
<meta name="description" content="Learn HTML step by step" />
✔ Used by search engines ✔ Appears in search results
4. Keywords (Less Important Today)
<meta name="keywords" content="HTML, CSS, Web Development" />
⚠️ Not heavily used by modern search engines anymore
5. Author
<meta name="author" content="anyName" />
✔ Defines the author of the page
🖥️ Important Note
👉 <meta> tags are NOT visible on the webpage
They only affect how the browser and search engines behave.
🎯 Common Use Cases
- Making websites responsive
- Improving SEO
- Setting encoding
- Providing page information
⚠️ Tips & Best Practices
Always include:
<meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />Keep descriptions clear and relevant
Don’t spam keywords
Place
<meta>tags inside<head>only
🚫 Common Mistakes
- Forgetting the viewport tag → breaks mobile layout
- Using multiple conflicting meta tags
- Writing very long or useless descriptions
🧪 Mini Exercise
Create a page with:
- Charset meta tag
- Viewport meta tag
- Description meta tag
Then:
- Open your page on mobile (or DevTools)
- See how it adapts