HTML Tutorial · HTML Basics · Lesson 3 of 34

HTML Document Structure

DOCTYPE, html, head and body — the skeleton of every page.

The page skeleton

Example 1Try it yourself

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Page title shown in the browser tab</title>
  </head>
  <body>
    <h1>Visible content goes in the body</h1>
    <p>Browsers    collapse   extra
       whitespace into a single space.</p>
  </body>
</html>

Part	Purpose
`<!DOCTYPE html>`	tells the browser this is modern HTML5
`<html lang="en">`	the root element; `lang` helps screen readers and search engines
`<head>`	metadata: title, character set, styles, scripts — not displayed
`<body>`	everything visible on the page

Nesting

Elements nest inside each other like boxes, and must be closed in reverse order:

<p>This is <strong>correct</strong>.</p>
<p>This is <strong>wrong.</p></strong>

Indent nested elements so the structure is easy to see. Browsers ignore extra whitespace and line breaks in HTML.

Test yourself

Which element contains the visible page content?

<head>
<html>
<body>
<main>

Show answer

Answer: <body>