HTML — Lesson 8

Doctype & Character Encoding

Understanding DOCTYPE declarations and character encoding.

By Majed Qandeel · Jul 26, 2026 · Lesson 8 of 25

Doctype & Character Encoding

Every HTML document needs a proper declaration and character encoding to render correctly across all browsers and devices.

The DOCTYPE Declaration

The <!DOCTYPE html> declaration tells the browser which version of HTML the page uses. In HTML5, it is simple and short.

<!-- HTML5 (always use this) --> <!DOCTYPE html> <!-- Old HTML 4.01 (don't use) --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Without a DOCTYPE, browsers enter quirks mode, which causes inconsistent rendering. Always include it as the very first line.

Character Encoding

The <meta charset> tag tells the browser which character set to use when displaying text. UTF-8 is the universal standard.

<head> <!-- Always put this as the first tag inside <head> --> <meta charset="UTF-8"> <title>My Page</title> </head>

Why UTF-8 Matters

UTF-8 supports every character in virtually every language, plus symbols and emoji. Without it, special characters may display as garbage.

<!-- Without UTF-8, these may break: --> <p>café, naïve, résumé</p> <p>© 2026 — All rights reserved</p> <p>Price: $100 &euro; (€)</p>

Complete HTML5 Starter

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Web Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>Special chars: café, ñ, ©, ★</p>
</body>
</html>

The lang Attribute

The lang attribute on <html> tells browsers and screen readers which language the content is in, improving accessibility and search ranking.

Tip: Always place <meta charset="UTF-8"> as the very first element inside <head> - it must come before any other tags or the browser may guess incorrectly.

Practice what you learned in the Deoit Editor — a free, browser-based code editor.

Open Editor →