MasterOnce
HTML

Document Structure

HTML Document Structure

What is it?

An HTML document has a doctype, html, head, and body. This structure tells the browser how to interpret the page.

Why does it exist?

Browsers need a consistent structure to render pages correctly and to support SEO and accessibility.

Examples

Basic

Example 1

<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>

A minimal HTML document with required sections.

Intermediate

Example 1

<head>
  <meta charset="UTF-8" />
  <title>My Page</title>
</head>

Set metadata and a page title inside the head.

Advanced

Example 1

<body>
  <header>Site Header</header>
  <main>Main content</main>
  <footer>Footer</footer>
</body>

Use semantic containers inside the body.

Common Mistakes

Common mistakes with document structure:
1. Missing <!DOCTYPE html>
2. Putting visible content inside <head>
3. Forgetting <html> or <body> tags

Write it once before proceeding

This helps your brain start forming the pattern.

<!DOCTYPE html>

Every page needs a skeleton

Simple Explanation

HTML pages start with a standard skeleton so the browser knows what to do.

Think of it like this

It is like a house plan with a foundation, rooms, and a roof.

Tiny Example

<html><body>Hello</body></html>

Core Drill: Lock It In

Complete the 'Write Once' section above to unlock this drill.

Repetitions0 / 3
<!DOCTYPE html>
Next →