Anatomy of an HTML Document — DOCTYPE, html, head, body

Every HTML document follows a strict skeletal structure. Understanding each part helps you debug problems and write clean markup.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>
<body>
  <!-- visible content goes here -->
</body>
</html>

<!DOCTYPE html> — always the first line. It's not a tag but a declaration that prevents the browser from switching into a legacy "quirks mode" that renders things inconsistently.

<html> — the root element. Everything else lives inside it. The lang attribute is important for accessibility tools and translation software.

<head> — contains metadata: the page title, character encoding, linked CSS files, favicon links, and SEO tags. Nothing inside <head> is directly visible on the page itself (except the tab title).

<body> — contains everything the user actually sees and interacts with: text, images, buttons, forms.

A common beginner mistake is putting visible content like <p> or <img> tags inside <head> — browsers will usually ignore or misplace them. Keep the separation strict: <head> is for the browser and search engines, <body> is for humans.