HTML Document Structure: DOCTYPE, html, head and body Explained

Every HTML document has the same skeleton. Knowing what each part does helps you put content in the right place and avoid subtle display problems.

The skeleton#

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page title</title>
  </head>
  <body>
    <!-- visible content -->
  </body>
</html>

The DOCTYPE#

<!DOCTYPE html> must be the very first line. It is not an element; it is an instruction that tells the browser to use standards mode, the modern way of rendering pages. Without it, browsers fall back to quirks mode, which imitates bugs of very old browsers, so layouts can behave unexpectedly.

The DOCTYPE is case-insensitive. <!doctype html> is equally valid.

The html element#

<html> is the root element: every other element is inside it. Always give it a lang attribute:

<html lang="en">     <!-- English -->
<html lang="hi">     <!-- Hindi -->
<html lang="en-IN">  <!-- English as used in India -->

The language helps screen readers choose the right pronunciation, lets browsers offer translation, and helps search engines.

The head element#

<head> contains information about the document. Nothing in it is drawn on the page. Typical contents:

The head element lesson covers these in detail.

The body element#

<body> contains everything the visitor sees: headings, paragraphs, images, links, forms and so on. There is exactly one <body> per document.

What the browser does with mistakes#

Browsers are designed never to give up on a page. If you leave out <html>, <head> or <body>, the browser adds them for you when it builds the page. For example, this file:

<title>Tiny page</title>
<p>Hello!</p>

is understood as if the <title> were in a <head> and the <p> in a <body>. It works, but rely on that and you will eventually hit a case where the browser's guess is not what you meant. Always write the full skeleton.

The DOM tree#

When the browser reads HTML, it builds the DOM (Document Object Model), a tree of objects with html at the root:

html
├── head
│   ├── meta
│   ├── meta
│   └── title
└── body
    ├── h1
    └── p

CSS selects nodes in this tree to style them, and JavaScript reads and changes it. You can see the live DOM in your browser's developer tools (Inspect → Elements).

Common mistakes#

Practice#

<!DOCTYPE html>
<html lang="hi">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>नमस्ते</title>
  </head>
  <body>
    <h1>नमस्ते दुनिया</h1>
  </body>
</html>

Key takeaway#