🏗️ Foundation Building

HTML Document Structure

Learn how browsers read and render your HTML code, from raw bytes to beautiful web pages. Master the essential skeleton of every website.

How Browsers Read HTML

HTML Document Templates

Basic HTML5 Template

<!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>Welcome to my website.</p>
</body>
</html>

Essential Document Elements

🎯<!DOCTYPE html>

Document Type Declaration

Tells browser this is HTML5 document

Required

🌳<html>

Root Element

Container for all HTML content

Required

🧠<head>

Document Metadata

Contains page info, styles, scripts

Required

🔤<meta charset>

Character Encoding

Defines text encoding (UTF-8 recommended)

Essential

📱<meta viewport>

Responsive Design

Controls mobile viewport scaling

Mobile Essential

🏷️<title>

Page Title

Shows in browser tab and search results

Required for SEO

📄<body>

Content Container

Holds all visible page content

Required

🌳 Visual DOM Tree Structure

How HTML becomes a Tree

Browsers parse your flat HTML into a hierarchical tree structure

HTML Source

<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello</h1>
    <div>
      <p>World</p>
    </div>
  </body>
</html>

DOM Tree Structure

document

└── html

├── head

│ └── title "My Page"

└── body

├── h1 "Hello"

└── div

└── p "World"

🚨 Common Structural Mistakes

What to Avoid

✗

Missing DOCTYPE declaration

✗

No viewport meta tag for mobile

✗

Incorrect character encoding

✗

Multiple <body> tags

✗

Content outside <html> tags

✗

Missing <title> element

✗

No language attribute on <html>

✗

Scripts blocking rendering

Best Practices

✓

Always start with <!DOCTYPE html>

✓

Include viewport meta tag

✓

Use UTF-8 character encoding

✓

Single <body> element

✓

All content inside <html>

✓

Descriptive <title> for SEO

✓

Specify lang attribute

✓

Use async/defer for scripts

🧩 Build Your HTML Structure

Drag and drop the elements to build a proper HTML document structure

Available Elements

<!DOCTYPE html>

<html>

<head>

<meta charset>

<meta viewport>

<title>

<body>

Your Document Structure

Drag elements here to build your HTML document

🎯 Key Takeaways

🏗️

Solid Foundation

Proper HTML structure is the foundation of every website

⚡

Performance

Correct structure helps browsers render faster

🔍

SEO & Accessibility

Proper HTML improves search ranking and accessibility