References

Beginner-friendly references for web development, with live, editable examples.

The HTML <meta> tag

Element All modern browsers Updated
Quick answer

The HTML <meta> element provides document metadata that no other element can — character encoding, the responsive viewport, the SEO description, robots directives, theme color and social cards. It is a void element placed in the <head>.

Overview

The <meta> element carries document-level metadata that other elements cannot express. It is a void element that lives in the <head>, and a value for a named meta goes in its content attribute.

Four forms do most of the work: <meta charset="utf-8"> sets the character encoding and should come first in the head; <meta name="viewport"> enables responsive layout on mobile; <meta name="description"> supplies the snippet search engines may show; and http-equiv directives emulate certain HTTP headers.

Beyond the basics, meta tags drive a lot of behavior: name="robots" controls indexing, Open Graph (property="og:*") and Twitter card tags shape how links look when shared on social media, and name="theme-color" tints the browser UI on mobile.

Syntax

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A concise page summary.">

Attributes

The <meta> element supports the following attributes, in addition to the global attributes available to every HTML element.

Attribute Value Description
charset A character-encoding label — always utf-8 for modern documents. Declares the document character encoding.
content A string whose meaning depends on the accompanying name/http-equiv. Holds the value of a meta declaration.
http-equiv content-type default-style refresh content-security-policy x-ua-compatible Defines an HTTP-header-like meta directive.
name description viewport robots keywords author theme-color referrer color-scheme generator Names a metadata value on a meta tag.

Example

Live example 
<meta name="description" content="Free HTML, CSS and JavaScript references with live, editable examples.">

Best practices

  • Put <meta charset="utf-8"> first in the <head>.
  • Include <meta name="viewport" content="width=device-width, initial-scale=1"> for responsive layouts.
  • Write a unique name="description" for each page to influence the search snippet.
  • Add Open Graph (og:*) tags so shared links show a good title, description and image.

Frequently asked questions

What is the meta element for?
To provide document-level metadata — character encoding, viewport, description, robots directives and social-preview tags — in the <head>.
What is the viewport meta tag?
<meta name="viewport" content="width=device-width, initial-scale=1"> tells mobile browsers to lay the page out at the device width, which is essential for responsive design.
How do I set the page description for search engines?
Use <meta name="description" content="…"> with a concise, unique summary of the page.
What are Open Graph meta tags?
property="og:*" tags that control how a page's title, description and image appear when shared on social media.
menu meter