<meta charset="utf-8"> vs <meta http-equiv="Content-Type">

HTML

Meta Tags

Web Development

Coding Standards

Web Content Management

<meta charset="utf-8"> vs <meta http-equiv="Content-Type">

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Start Practicing Learn More

Introduction

Both <meta charset="utf-8"> and <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> tell the browser which character encoding to use when interpreting the HTML document. The short form (charset) was introduced in HTML5 and is the recommended approach for modern documents. The long form (http-equiv) is the pre-HTML5 syntax that mimics an HTTP header. They produce identical behavior in all modern browsers.

The Two Forms

html

1<!-- HTML5 (short form) -->
2<meta charset="utf-8">
3
4<!-- Pre-HTML5 (long form) -->
5<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Both must appear within the first 1024 bytes of the document, before any non-ASCII content. Place them immediately after the opening <head> tag.

Why Character Encoding Matters

Without a declared encoding, the browser guesses — and may guess wrong:

html

1<!-- No encoding declared -->
2<html>
3<head><title>Café Menu</title></head>
4<body>
5  <p>Crème brûlée — €5.00</p>
6</body>
7</html>

If the browser assumes Latin-1 instead of UTF-8, characters like é, û, è, and € display as garbled text (mojibake). Declaring the encoding eliminates this ambiguity.

Which One to Use

Feature	`<meta charset="utf-8">`	`<meta http-equiv="Content-Type">`
HTML version	HTML5+	HTML 4, XHTML, HTML5
Syntax length	22 characters	65 characters
Readability	Clear and concise	Verbose
Browser support	All modern browsers	All browsers (including IE6)
XHTML support	No (use XML declaration)	Yes

Use <meta charset="utf-8"> for all HTML5 documents. Use the long form only when targeting HTML 4 strict compatibility or XHTML served as text/html.

Correct Placement

The encoding declaration must come early in the document — before any characters that depend on it:

html

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="utf-8">  <!-- FIRST in <head>, before <title> -->
5    <title>My Page</title>
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7</head>

If the <meta charset> tag appears after 1024 bytes, some browsers ignore it and guess the encoding instead.

HTTP Header vs Meta Tag

The HTTP Content-Type header takes precedence over the meta tag:

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8

If the server sends charset=ISO-8859-1 in the header but the document has <meta charset="utf-8">, the browser uses ISO-8859-1 (the header wins). To avoid conflicts, ensure the server and the document agree on the encoding.

Check the server header:

bash

curl -I https://example.com | grep -i content-type
# Content-Type: text/html; charset=UTF-8

Configure it in common servers:

apache

1# Apache (.htaccess)
2AddDefaultCharset UTF-8
3
4# Or per content type
5AddCharset UTF-8 .html .css .js

nginx

1# Nginx
2charset utf-8;
3# Or in specific location blocks
4location / {
5    charset utf-8;
6}

XHTML and XML

For XHTML served as application/xhtml+xml, use the XML declaration instead:

xml

1<?xml version="1.0" encoding="UTF-8"?>
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4<html xmlns="http://www.w3.org/1999/xhtml">
5<head>
6    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
7</head>

<meta charset="utf-8"> is not valid in XHTML strict mode. Use the long form or the XML declaration.

BOM (Byte Order Mark)

A UTF-8 BOM (EF BB BF) at the beginning of the file also signals encoding to the browser. However, it is not recommended for HTML because:

It can cause issues with PHP (<?php must be the first bytes)
Some tools add whitespace before <!DOCTYPE>
The meta tag is the standard and more explicit

Common Pitfalls

Placing the meta tag after non-ASCII content: The browser starts parsing before it finds the encoding declaration. If non-ASCII characters appear first, they may be misinterpreted. Always place <meta charset> as the first child of <head>.
Server header contradicting the meta tag: If your server sends Content-Type: text/html; charset=ISO-8859-1 but your file declares <meta charset="utf-8">, the header wins and UTF-8 characters break. Configure the server to send charset=UTF-8.
Using both forms in the same document: Including both <meta charset="utf-8"> and <meta http-equiv="Content-Type"> is redundant. Browsers handle it, but HTML validators may warn. Pick one.
Saving the file in a different encoding: If your editor saves the file as Latin-1 but the meta tag says UTF-8, characters are doubly broken. Ensure your editor saves in UTF-8 (without BOM for HTML).
Forgetting encoding in AJAX responses: Dynamically loaded HTML fragments need encoding set in the HTTP response header. The meta tag in the fragment is ignored because the browser has already started parsing.

Summary

<meta charset="utf-8"> is the HTML5 standard — use it for all modern documents
<meta http-equiv="Content-Type"> is the pre-HTML5 equivalent — functionally identical but more verbose
Place the encoding declaration within the first 1024 bytes, before <title> and any non-ASCII content
The HTTP Content-Type header overrides the meta tag — ensure they match
Always save HTML files in UTF-8 encoding in your editor
Use UTF-8 for everything — it supports all Unicode characters and is backward-compatible with ASCII