HTML & CSS Course
HTML & CSS
/
Intermediate

Meta Tags

Definition

Tags placed within the `<head>` of an HTML document that provide metadata (data about data) about the HTML document. Metadata is not displayed on the page, but is machine parsable.

Explain Like I'm New

Meta tags are the ID card of your website. When Google or Facebook visits your site, they don't read your paragraphs. They read your meta tags to instantly figure out the title of your site, the description for Google search results, and what image to display when someone shares your link on Twitter.

Real World Example

The viewport meta tag `<meta name="viewport" content="width=device-width, initial-scale=1.0">`. Without this single line of code, your website will look like a zoomed-out desktop site on mobile phones.

Common Use Cases

  • •SEO optimization
  • •Mobile responsiveness
  • •Social media link previews

Interactive Example

Interview Questions

basic

  • Where do `<meta>` tags go in an HTML document?

intermediate

  • What does the `charset="UTF-8"` meta tag do?

Flash Cards

Question

Where do they go?

Click to reveal answer
Answer

Inside the `<head>` tag.

Question

What does charset UTF-8 do?

Click to reveal answer
Answer

It tells the browser what character encoding to use. UTF-8 supports almost all characters and symbols in the world, including emojis. Without it, special characters might render as weird question marks or boxes.