HTML / Element

What Does the meta Element Do?

The meta element gives a browser information about a page. It does not display its own text on the page. You can use it to describe the character encoding or give a short page description.

Three things to remember

Most meta elements go inside head, where page information belongs.
A meta element does not display its contents as page text.
The attributes you use depend on what information you want to give.

Common examples

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="A short page description">
</head>

These three elements have different jobs.

Tell the browser how to read the text

<meta charset="utf-8">

A character encoding tells the browser how to turn the file's bytes into letters and symbols. UTF-8 is used for text in many languages. Place this line near the start of head.

Fit the page to a phone screen

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

This asks the browser to use the device's screen width as the page width. It does not arrange text and buttons for you. CSS is still needed to make a page fit different screens.

Give the page a short description

<meta name="description" content="A short page description">

name says what kind of information you are giving. content gives its value. Search services may use the description, but they do not always show it.

Page title and language go in different places

Use the title element for the page title. Use the lang attribute on html to identify the page language. A meta element does not replace either one.

<html lang="en">
<head>
  <title>Page title</title>
  <meta name="description" content="Page description">
</head>

Common mistakes

Expecting meta text to appear in the page. Put visible text in body.
Putting the character encoding near the end of the page. Place it early so the browser can find it before reading the text.
Mixing up name and content. The first names the kind of information; the second gives its value.

One more detail

Some meta elements use an http-equiv attribute to give the browser a particular instruction. These instructions do not always work like HTTP headers sent by a server, so check what each one can do before using it.

Check the details in Atlas

For attribute rules, how browsers choose a character encoding, and browser and assistive-technology observations, see the meta element in Yugien Atlas.