HTML

HTML Meta Charset vs HTTP Content-Type Header

Last updated: August 29, 2026.

The HTTP response header can declare an HTML document’s encoding before the browser reads the body. The meta charset element provides an in-document declaration. They should agree with the actual bytes.

Recommended setup

Send UTF-8 at both levels and put the meta declaration near the start of the head.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>UTF-8 page</title>
</head>
<body>...</body>
</html>
<?php
header('Content-Type: text/html; charset=UTF-8');
?><!doctype html>
<meta charset="utf-8">
<title>PHP response</title>

The HTTP declaration wins

When the header and meta element conflict, fix the server response instead of relying on the HTML declaration. Static files require web-server configuration; generated pages should set the header before any output.

Verify the network response

Inspect Content-Type in browser developer tools. Viewing page source confirms only the meta element. Also check that a framework, proxy, or template is not adding a second conflicting header.

Make both declarations agree

The HTTP header is authoritative for an HTTP response, while the meta element lets the browser identify the encoding early when the header is absent or the file is opened locally. Configure the server and document to declare the same encoding.

Inspect the actual network response rather than only page source. Test a fresh response without cached headers and include non-ASCII text near the beginning of the document.

  • Place meta charset near the start of head.
  • Send text/html with charset=UTF-8.
  • Do not use a meta tag to compensate for wrongly encoded bytes.

Keep the byte encoding, declaration, storage, and decoder consistent. When diagnosing a problem, preserve the original input and change one boundary at a time so the actual cause remains visible.

Continue with mojibake troubleshooting, UTF-8 comparison, and character sets list.

Practical implementation check

Use browser developer tools and a command-line HTTP client to inspect the actual response rather than relying on appearance alone. Keep a small test page containing ASCII, accented text, punctuation, currency symbols, and emoji. That sample makes an incorrect declaration or conversion obvious and gives you a repeatable check after server, template, or import changes.

Reference: MDN Content-Type header reference.

admin

admin

Related Posts