HTML Meta Tags

Meta tags don’t show up on your webpage, but they speak volumes to search engines, browsers, and social platforms. They're your site’s introduction, translator, and rulebook — all hidden in the <head>.

Meta tags provide metadata — information about your page — to search engines and browsers. They help define character encoding, page descriptions, viewport behavior, and more.

This tag defines the character encoding — the set of characters your page supports. Without it, browsers may misinterpret text like “café” or “naïve”.

<meta charset="UTF-8">

[ Tells the browser: This page uses UTF-8, which supports nearly all characters. ]

Best Practice: Always place this at the very top of your <head> for fast interpretation.

This tag tells search engines what your page is about. It often shows up in search result snippets.

<meta name="description" content="Learn fun facts about apples, bananas, and cherries — and which fruit wins the crown.">

[ Appears as the description beneath the link in Google Search. ]

Tips:

• Keep it under 160 characters
• Write like a teaser — informative but intriguing
• Include important keywords naturally

This tag controls how your webpage scales on different screen sizes — especially crucial for mobile devices.

<meta name="viewport" content="width=device-width, initial-scale=1">

[ Ensures your layout adapts to the width of the user’s device. ]

Without this tag, mobile visitors might see your page zoomed out and unreadable.

<meta name="author" content="Fruit Team">
<meta name="robots" content="index, follow">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fruit Catalog: Apple, Banana, Cherry</title>
  <meta name="description" content="Explore sweet and healthy fruit facts: apples, bananas, cherries, and more!">
</head>

[ Search engines and browsers use this metadata to index and display your page ]

Meta tags shape how your webpage is understood — by bots, browsers, and beyond. Today you learned:

• How to define character encoding with meta charset
• Why meta name="description" affects SEO visibility
• How meta viewport ensures mobile responsiveness
• Which other meta tags can support SEO, sharing, and control

Choose the option that lists all and only the correct statements.

1. name="description"
2. name="viewport"
3. http-equiv="refresh"
4. charset="UTF-8"

Choose the option that lists all and only the correct statements.

1. description
2. keywords
3. charset
4. viewport

In the next tutorial, we’ll dive into building a complete <head> section for a real-world HTML page — with SEO, accessibility, and social sharing in mind.