LESSON 3

HTML Document Structure

Learning objective: Build a complete, valid HTML document from the required boilerplate.

Understand

Every real HTML page shares the same skeleton of required tags.

An HTML document starts with <!DOCTYPE html>, then an <html> element containing two parts: <head> (information *about* the page, like its title) and <body> (the content people actually see). Getting this structure right is what makes a file a proper web page.

Analogy: Think of it like a letter: the head is the envelope details, and the body is the message inside.

See It in Action

Here is the minimal structure every page needs:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My Page</title>
  </head>
  <body>
    <h1>Welcome</h1>
  </body>
</html>
How it works: <!DOCTYPE html> tells the browser to use modern HTML. <head> holds the title and settings; <body> holds visible content like the <h1>.

Try It Yourself

  1. Copy the boilerplate into a new file.
  2. Change the <title> to your name.
  3. Add a paragraph inside the <body> and refresh.

Quick Quiz

Which element holds the content people see on the page?

Challenge

Create a full HTML document with a custom title and one heading in the body.

Success condition: Your page has a valid doctype, head with a title, and a visible body heading.