The <meta> element provides metadata about the document — character encoding, viewport settings, page description, and more — using name/content or charset attribute pairs.

Syntax

<meta charset="UTF-8">
<meta name="description" content="Page summary for search results.">
<meta name="viewport" content="width=device-width, initial-scale=1">

Deep Dive Course

**`<meta>`** is a void (self-closing) element that lives in `<head>` and comes in a few distinct forms: `<meta charset="UTF-8">` declares text encoding, `<meta name="viewport" ...>` controls mobile scaling/responsiveness, `<meta name="description" content="...">` supplies the snippet text search engines often show under your title, and `<meta name="robots" content="noindex">` can tell search engines not to index a page. Each `<meta>` tag typically sets exactly one piece of metadata.

1Understanding <meta>

`<meta>` is a void (self-closing) element that lives in <head> and comes in a few distinct forms: <meta charset="UTF-8"> declares text encoding, <meta name="viewport" ...> controls mobile scaling/responsiveness, <meta name="description" content="..."> supplies the snippet text search engines often show under your title, and <meta name="robots" content="noindex"> can tell search engines not to index a page. Each <meta> tag typically sets exactly one piece of metadata.

💡

meta description doesn't directly affect ranking, but a well-written one (under ~155 characters) strongly influences whether people click your result — it's effectively free ad copy in the search results.

editor.html

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Learn HTML for free with interactive lessons.">
</head>

localhost:3000

2Practical Example

Here is a real-world application of <meta> showing how it is used in production HTML.

editor.html

<!-- Preventing search engines from indexing a page -->
<meta name="robots" content="noindex, nofollow">

localhost:3000

3Best Practices

Follow these guidelines when working with <meta>:

1. Always include <meta charset="UTF-8"> as the first line in <head>

2. Include a unique <meta name="description"> per page for better search snippets

3. Add <meta name="viewport" content="width=device-width, initial-scale=1"> for proper mobile rendering

⚠️

Tip: meta description doesn't directly affect ranking, but a well-written one (under ~155 characters) strongly influences whether people click your result — it's effectively free ad copy in the search results.

editor.html

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Learn HTML for free with interactive lessons.">
</head>

localhost:3000

Examples

Example 01Basic Usage

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Learn HTML for free with interactive lessons.">
</head>

Example 02Advanced Example

<!-- Preventing search engines from indexing a page -->
<meta name="robots" content="noindex, nofollow">

Best Practices

Always include as the first line in
Include a unique per page for better search snippets
Add for proper mobile rendering

Interview Question

What's the difference between the charset and name/content forms of <meta>?▼

Hint: Think about what kind of information each variant is designed to carry.

Exercises

EasyPractice using <meta> in a real scenario.

View Solution

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Learn HTML for free with interactive lessons.">
</head>

Frequently Asked Questions

What's the difference between the charset and name/content forms of <meta>?▼

is a special single-purpose form that tells the browser how to decode the byte stream into text — it must come early in , before any content that depends on the encoding. The name/content form () is a generic key-value pair used for many different purposes: viewport settings, SEO description, robots directives, Open Graph tags, and more — the 'name' identifies which piece of metadata it is, and 'content' holds its value.

Related Functions

head-tagMETA TagsOpen Graph