Meta Charset: Declare UTF-8 Character Encoding in HTML

The meta charset tag tells the browser which character encoding a page uses. A character encoding maps the bytes of a file to letters and symbols. The HTML standard requires UTF-8, so put <meta charset="utf-8"> at the top of <head> and save the file as UTF-8.

Syntax

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page title</title>
</head>

The older form with http-equiv has the same effect:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Use one of the two forms, not both. The W3C guide to encoding declarations says that the choice does not matter, and that UTF-8 and utf-8 are the same.

Rules in the HTML standard

The HTML standard gives these rules for the declaration:

• The value must be utf-8, in uppercase or lowercase letters.
• The document must be encoded in UTF-8, whether it has a declaration or not.
• A document can have only one meta element with a charset attribute.
• A document must not have both the charset form and the http-equiv form.
• The whole element must be in the first 1024 bytes of the document.
• The declaration must not use character references or escapes.

The standard requires a declaration even if all characters are ASCII. The encoding is necessary for non-ASCII text that users type in forms and for URLs that scripts make. There are two exceptions: the file starts with a byte order mark, or the HTTP Content-Type header gives the encoding.

In XML documents, the charset attribute has no effect. Use the XML declaration there.

HTTP header and byte order mark

A byte order mark (BOM) is a special byte sequence at the start of a file. The server can also give the encoding in the HTTP Content-Type header:

Content-Type: text/html; charset=utf-8

The W3C guide gives this order of precedence:

Source of the encoding	Precedence
Byte order mark	Highest, wins over the HTTP header
HTTP Content-Type header	Wins over the meta tag
<meta charset> in the page	Used when the two above do not give an encoding

If your server sends a charset in the header, make sure that it is the same as the meta tag. The W3C guide also recommends that you keep the meta tag when you use a BOM.

Search engine support

Google lists both forms in its supported meta tags. Google says that they define the content type and the character set of the page, and it recommends UTF-8 where possible. In the http-equiv form, put quotes around the value of the content attribute. Google says that without quotes, the charset attribute can be read incorrectly.

Yandex lists the Content-Type meta tag in its meta tag help. It says that this tag defines the type and encoding of a document.

What the meta charset tag does not do

• It does not change the bytes of the file. The W3C guide says that you must also save the content as UTF-8. If the declaration and the real encoding are different, text can show as wrong characters.
• It does not set the language of the page. Use the lang attribute on <html> for that.
• It does not override an HTTP header or a byte order mark that gives a different encoding.

For other tags that go in <head>, see the meta description and the meta viewport tag.