HTML Document Structure

The page skeleton

Every HTML page uses the same skeleton. Run it, then read what each line does:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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>
    <p>UTF-8 shows every language: café, niño, Straße.</p>
  </body>
</html>

A good way to remember it: the head is like the label on a parcel (who it's for, what's inside), and the body is what's in the box.

Nesting: elements inside elements

Elements go inside each other like boxes inside boxes. An element inside another is its child, the outer one is its parent, and elements side by side are siblings:

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

Always close elements in the reverse order you opened them:

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

Whitespace and indentation

Browsers treat any run of spaces, tabs and line breaks as a single space. That's why you can indent your code to show the nesting without changing the page, and why extra blank lines don't create space on the page: use a new <p> for a new paragraph.

Comments

Text between <!-- and --> is a comment. The browser ignores it, so you can leave notes in your code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Comments</title>
  </head>
  <body>
    <!-- This note is for developers and isn't shown -->
    <h1>Comments</h1>
    <p>Only this paragraph appears on the page.</p>
    <!--
      Comments can span
      several lines.
    -->
  </body>
</html>

Common mistakes

• Content outside the <body> or visible elements in the <head>.
• Forgetting <!DOCTYPE html>, which puts the page in quirks mode.
• Leaving out charset, which can turn é into é.
• Elements closed in the wrong order. Indenting your code makes these easy to spot.