DOCTYPE and charset: two declarations every HTML page needs

WebAudit 360 TeamWebAudit 360 TeamAugust 21, 20264 min read
DOCTYPE and charset: two declarations every HTML page needs

These two are the most basic items in the whole audit, so basic that modern frameworks usually add them for you and you may never think about them. But hand-built pages, old templates, and certain server setups still ship without them, and the symptoms (a layout that's subtly broken, or text full of ’ garbage characters) are confusing enough that it's worth knowing the cause. Both fixes are one line, at the very top of the document.

Our check simply confirms both are present.

The DOCTYPE

The first line of any HTML page should be:

<!DOCTYPE html>

That's the modern HTML5 doctype: short, and the only one you need. Its job is to tell the browser "render this in standards mode." Without it, browsers fall back to quirks mode, a compatibility behavior that emulates how ancient browsers worked in the 1990s. In quirks mode, the box model, sizing, and spacing all behave subtly differently from what your CSS expects, so your layout can look broken in ways that are maddening to debug, because the CSS is "right" and the browser is interpreting it by old rules.

One line at the top switches on the modern rendering everyone actually designs for.

The charset

The character encoding declaration should appear early in the <head>, as the first thing or close to it:

<meta charset="utf-8" />

This tells the browser how to interpret the bytes of your page as text. UTF-8 is the universal standard. It handles every language, emoji, and symbol. Without an explicit charset, the browser has to guess, and when it guesses wrong you get mojibake: curly quotes turning into ’, accented letters mangled, dashes becoming â€". You've seen it on neglected pages; it looks broken and unprofessional.

Declare utf-8 and the guessing stops. Put it near the top of <head> because the browser needs to know the encoding before it parses much text. Declaring it late means it may have already started misreading.

Why these matter

  • Predictable rendering. The DOCTYPE guarantees standards mode, so your CSS behaves the way you designed it instead of falling into quirks-mode compatibility rules.
  • Correct text, every language. A declared UTF-8 charset means quotes, dashes, accents, and non-Latin scripts all display correctly.
  • A baseline of competence. These are HTML 101. Missing them signals a page that wasn't built carefully, and they occasionally hide real rendering bugs behind the obvious ones.

These are low-weight checks because most pages pass automatically. When one fails, though, the visible symptoms are out of proportion to the tiny fix.

How to add them

If you write HTML directly, your document should start like this:

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

(Note the lang attribute right there too, another one-liner worth setting while you're in the <head>.)

If you use a framework or CMS, these are almost always handled for you, but it's worth a quick "view source" to confirm, especially on custom templates, email-to-HTML exports, or older hand-coded pages.

Common mistakes

  • No DOCTYPE, silently triggering quirks mode and subtle layout bugs.
  • An old, long doctype copied from a 2005 template. It's harmless, but <!DOCTYPE html> is all you need.
  • No charset, leading to garbled punctuation and accents.
  • Declaring the charset too late in the <head>, after the browser has already started parsing text.

FAQ

What happens without a DOCTYPE?

The browser renders in quirks mode, emulating old, non-standard behavior. Your CSS, especially sizing and spacing, can render differently than intended, causing layout bugs that are hard to trace.

Which charset should I use?

UTF-8. It's the universal standard and handles every language and symbol. Declare it with <meta charset="utf-8"> near the top of the <head>.

Why do I see weird characters like ’ on my page?

That's a charset mismatch (mojibake): the browser is decoding UTF-8 text as a different encoding. Declaring <meta charset="utf-8"> fixes it.

Doesn't my framework handle these already?

Usually, yes. Modern frameworks and CMSs include both. The cases that fail are custom templates, old hand-coded pages, and certain exports, so a quick source check is worth it.

Key Takeaways

  • Every HTML page needs <!DOCTYPE html> as its first line; without it, browsers fall back to quirks mode and render the box model, sizing, and spacing by 1990s-era rules.
  • The <meta charset="utf-8"> declaration must sit near the top of <head> so the browser knows the encoding before it parses text; declaring it late risks misread characters.
  • A missing or wrong charset produces mojibake, such as curly quotes rendering as ’ and dashes rendering as â€".
  • Modern frameworks and CMSs add both declarations automatically; the failures show up in custom templates, old hand-coded pages, and email-to-HTML exports, so confirm with a quick "view source".

Want to confirm every page declares its DOCTYPE and charset? Run a free audit. It's a quick check among many. More in the Technical explainers.

← Back to the blog