LESSON 22

Meta Tags

Learning objective: Use meta tags to control page settings and how it is shared.

Understand

Meta tags live in the <head> and describe the page to browsers and tools.

Meta tags carry information *about* the page. <meta charset='UTF-8'> sets character encoding, the viewport meta makes pages responsive on phones, and a description meta helps search engines and link previews. They are invisible on the page but important.

Analogy: Meta tags are like the label on the back of a product: not the main content, but essential details.

See It in Action

Common meta tags:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="My personal site.">
How it works: The charset avoids broken characters, the viewport tag enables mobile-friendly scaling, and the description is used in search results.

Try It Yourself

  1. Add the viewport meta tag to a page and view it on a narrow window.
  2. Add a description meta tag.
  3. Confirm the charset meta is present.

Quick Quiz

Which meta tag helps pages display well on phones?

Challenge

Add charset, viewport, and description meta tags to one of your pages.

Success condition: Your page head contains all three meta tags and scales on mobile.