Getting Started with HTMLBeginner⏱ 7 min03 / 8

HTML Document Structure

Learn the essential skeleton every HTML page needs, from the DOCTYPE declaration to the head and body sections.

Every web page you have ever visited — from a simple blog post to a complex online store — is built on the same foundational skeleton. Before a browser can display anything, it needs to understand what kind of document it is reading and how the pieces are organized. In this lesson you will learn exactly what that skeleton looks like, why each piece exists, and how to write it confidently from memory.

#The Full Boilerplate at a Glance

This is the complete boilerplate — every HTML file you write starts here.

1
2
3
4
5
6
7
8
9
10
11
12<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first web page.</p>
  </body>
</html>

Looks a little intimidating? Do not worry. We will walk through every single line and you will see that each one has a clear, simple job.

#Line 1: <!DOCTYPE html>

The very first line is not actually an HTML element — it is a declaration. It tells the browser: "This file follows the modern HTML5 standard." Without it, some browsers fall back into a quirky legacy rendering mode that can make your carefully designed page look broken in unexpected ways.

Think of it like

Think of it like a language label on a letter

Imagine mailing a letter to a translator. Before they start translating, they need to know which language it is written in. <!DOCTYPE html> is that label — it tells the browser which rulebook to use before it reads a single word of your content.

#The <html> Element: the Root

Everything else lives inside the <html> element. It is the root — the outermost container for your entire page. Notice the lang="en" attribute. This tells screen readers and search engines what language the page is written in, which improves accessibility and SEO. Always include it.

#The <head>: Behind-the-Scenes Information

The <head> section holds metadata — information about the page rather than content on the page. Users never see this section directly, but browsers and search engines rely on it heavily. Let's look at its three most important children:

The three essential tags inside <head> and what each one does.

1
2
3
4
5
6
7
8
9
10<head>
  <!-- 1. Character encoding -->
  <meta charset="UTF-8" />

  <!-- 2. Responsive viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- 3. Tab title -->
  <title>My First Page</title>
</head>

`<meta charset="UTF-8">` — Sets the character encoding so the browser knows how to decode the bytes in your file. UTF-8 covers virtually every character in every language, including emoji. Without this, accented letters or special symbols might display as garbled nonsense.

`<meta name="viewport" ...>` — Tells mobile browsers not to zoom out and shrink your page. Without it, your site will appear tiny on a phone. This single line is the entry point to making sites work on mobile.

`<title>` — Sets the text that appears in the browser tab and in search engine results. It is the only <head> element users actually see (in the tab bar).

Common mistake

The <title> is NOT the same as an <h1>

A very common beginner mistake is to assume the <title> in the head shows up on the page. It does not — it only appears in the browser tab and in search results. To display a visible heading on the page, you need an <h1> element inside <body>.

#The <body>: What Users Actually See

Everything inside <body> is the visible content of your page — headings, paragraphs, images, buttons, links, and everything else. This is where you will spend most of your time as an HTML author. The <head> is configuration; the <body> is the show.

html

1
2
3
4<body>
  <h1>Welcome to My Site</h1>
  <p>I am learning HTML and loving it.</p>
</body>

#Nesting and Indentation

HTML elements can live inside other elements — this is called nesting. The structure forms a tree:

<html> contains <head> and <body>
<head> contains <meta> and <title>
<body> contains your content elements

Proper indentation (two or four spaces per level) makes that tree visible at a glance. It does not change how the browser renders the page, but it makes your code vastly easier to read, debug, and share.

Tip

Indent consistently and your future self will thank you

Pick either 2 or 4 spaces (or a tab) and stick to it throughout a file. Most code editors let you configure this and even auto-format for you. Good indentation is a sign of a thoughtful developer.

Quick check

Which part of an HTML document contains the visible content that users see on the page?

Key takeaways

Every HTML file must start with <!DOCTYPE html> to enable modern browser rendering.
The <head> holds invisible metadata (charset, viewport, title) — the <body> holds visible content.
Always set charset="UTF-8" and the viewport meta tag so text renders correctly and your page is mobile-friendly.
The <title> tag controls the browser tab text, not any visible heading on the page.
Consistent indentation makes nested HTML readable and easier to debug.

Practice challenges

Test yourself · earn XP

0/4

Predict the output#1

The page below loads in a browser. Where does the text 'My First Page' actually appear?

predict-output

1
2
3
4
5
6
7
8
9<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Fix the bug#2

This page is supposed to use the modern HTML5 standard, but something at the very top is wrong. What's the bug?

fix-bug

1
2
3
4
5
6
7
8
9
10<!DOCTYPE html5>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>About Me</title>
  </head>
  <body>
    <h1>Hi, I'm Alex!</h1>
  </body>
</html>

Fill in the blank#3

Complete the two essential <head> meta tags: one that sets the character encoding, and one whose name makes the page mobile-friendly.

<head>
  <meta charset="" />
  <meta name="" content="width=device-width, initial-scale=1.0" />
  <title>My First Page</title>
</head>

Reorder the lines#4

Arrange these lines into a valid HTML5 boilerplate document, correctly nested from the outside in.

</html>

  <head>

    <h1>Hello, World!</h1>

<html lang="en">

    <title>My First Page</title>

<!DOCTYPE html>

  </body>

  </head>

  <body>

Your turn

Practice exercise

Build a complete HTML document from scratch. Give the page a meaningful <title>, add an <h1> heading inside the body, and write a short <p> paragraph introducing yourself. Make sure you include the charset and viewport meta tags.

Try it live — edit the code and hit Run to see it rendered:

solution.html · editable

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- TODO: add charset meta tag -->
    <!-- TODO: add viewport meta tag -->
    <!-- TODO: add a descriptive title -->
  </head>
  <body>
    <!-- TODO: add an h1 heading -->
    <!-- TODO: add a paragraph about yourself -->
  </body>
</html>