Content · Explainer

Doctype, charset and html lang

Three one-line declarations at the top of every page. Each is trivial to add, each is easy to omit on a hand-built template, and each causes problems that look like something else entirely when it is missing.

Why these get missed

They are boilerplate, so they live in a template nobody has opened in two years.

Frameworks emit all three correctly, which is why most people never think about them. The pages that lack them are the hand-written ones: a landing page built for a campaign, an email template repurposed as a web page, an error page written directly in the server config, or a legacy section from an older CMS. Those pages are often the ones you most want indexed. The symptoms do not point at the cause, so teams usually debug the wrong thing first.

What each one actually does

Three different failures, three different signatures.

Missing doctype puts the browser in quirks mode

Without <!DOCTYPE html> the browser emulates decades-old layout behaviour: the box model changes, so widths and padding compute differently and the layout breaks in ways CSS cannot cleanly fix.

The usual sign is a page that looks subtly wrong in every browser at once, which sends people hunting through stylesheets. Adding one line at the top resolves it.

Missing charset produces mojibake

Without <meta charset="utf-8"> the browser guesses the encoding. Guess wrong and accented characters, curly quotes and any non-Latin script render as replacement characters.

Declare it as the first thing in the head, before any title or content, so the parser never has to guess and never has to restart. This matters most on exactly the languages where it is most visible.

Missing or wrong html lang

<html lang="en"> tells screen readers which pronunciation rules to use and gives search engines an explicit language signal instead of an inferred one.

A wrong value is worse than an absent one: a Turkish page declared lang="en" is read aloud with English phonetics, which is close to unusable. Template defaults left unchanged are the common cause.

Lang that disagrees with hreflang

If your hreflang annotations say a URL is the German version but that page declares lang="en", the two signals contradict each other.

Search engines have to pick one, and the result is unpredictable. See hreflang tags for how the set should line up.

The correct head, in order

Order matters for the first two, not for the rest.

Doctype comes first, before the <html> element. The lang attribute goes on that element. Charset comes first inside the head, ahead of the title, because a parser that discovers the encoding late may have to restart and re-parse what it already read. After that, the usual viewport, title, description and canonical follow in any order. The whole correction is three lines, and on a page missing all three it fixes layout, text rendering and language signalling at once.

Why an audit finds these and a browser does not

Modern browsers are forgiving, which hides the problem rather than solving it.

A browser will guess an encoding, tolerate a missing lang attribute, and render quirks mode without complaint. Nothing in the interface tells you any of it happened. So a page can carry all three faults and still look acceptable on the machine of the person who built it, while rendering badly for a visitor whose browser guesses differently or whose screen reader needs the language declared.

These also cluster. A template missing the doctype is usually missing the charset too, because both were omitted by the same hand at the same time. Finding one is a good reason to check the whole set across every template, not just the page that prompted the check.

Doctype, charset and lang questions we hear most

The specifics that come up on multi-language and legacy sites.

What is the correct html lang value for a page in Turkish?

lang="tr" for Turkish generally, or a region-qualified tag such as lang="tr-TR" if you need to be specific about the country variant. The value should follow the standard BCP-47 language-tag format, a short language code optionally followed by a region subtag, rather than a made-up abbreviation or the display name of the language.

My site is multi-language. Does every page need a different lang value?

Yes. The lang attribute describes the language of that specific page's content, so an English page needs lang="en" and its Turkish translation needs lang="tr", each on its own URL. This should agree with your hreflang annotations. If hreflang says a URL is the German version but the page itself declares lang="en", the two signals contradict each other and search engines have to guess which is right. See hreflang tags for the full setup.

What does mojibake look like and what causes it?

Mojibake is the garbled text you get when a page's actual byte encoding does not match the encoding the browser assumes while rendering it, accented letters and curly quotes turning into strings like ??? or boxes with question marks, or into unrelated symbol sequences. The usual cause is a missing or wrong charset declaration, which forces the browser to guess the encoding, and a wrong guess corrupts every character outside plain ASCII.

Where exactly should the charset meta tag go?

As the very first thing inside the head, before the title and before any other meta tag. Browsers read the head in order, and if they discover the encoding late, after already parsing some content in the wrong assumed encoding, they may have to throw that work away and reparse the page from the start. Declaring it first avoids that entirely.

Can a missing charset or lang attribute cause a real SEO problem, or is it just cosmetic?

Both. A missing charset is a rendering problem first, mojibake makes a page look broken and unprofessional to a visitor, which is bad regardless of ranking. But it is also a content-quality signal: pages with garbled text are harder for search engines to process correctly. A missing or wrong lang attribute is more subtly an SEO and accessibility problem: it sends the wrong or no language signal for the page, and it breaks pronunciation for screen reader users on that page entirely.

Check every page for the three declarations

Free to start. Flags missing doctype, missing charset, and absent or invalid html lang, page by page across the site.

Start my free audit