STRUCTURE8 min20 XP

HTML Document Structure

Learn HTML Document Structure with live examples, interactive editor, and Shiv AI — your funny but brilliant coding tutor.

HTML Document Structure

Every HTML file needs a specific structure — like a building needs a foundation before walls. Browsers read this structure to know how to display your page. Get this right and everything else becomes easy.

Full Structure Explained

Example 1 — The Blueprint Every Page Needs

<!-- 1. DOCTYPE: "Hey browser, I am HTML5" -->
<!DOCTYPE html>

<!-- 2. Root element: lang tells Google the language -->
<html lang="en">

  <!-- 3. HEAD: invisible to users, crucial for browser + Google -->
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0"/>
    <title>CIWeb — Learn HTML Free</title>
    <meta name="description"
          content="Free HTML course with 22 lessons"/>
  </head>

  <!-- 4. BODY: everything the user actually sees -->
  <body>
    <h1>Welcome to CIWeb!</h1>
    <p>22 free HTML lessons. Start learning now.</p>
  </body>

</html>

ciweb.in | CIWeb — Learn HTML Free

Welcome to CIWeb!

22 free HTML lessons. Start learning now.

Notice: the title appears in the browser tab (top). Only <body> content shows on the page. <head> is invisible but essential.

What Each Part Does

Every Tag Explained

<!DOCTYPE html>Not a tag. Instruction to browser: use HTML5 rules. Must be line 1, every time.

<html lang="en">Root of the entire document. lang="en" tells Google and screen readers: English content.

<title>Shown in browser tab and Google search results. Critical for SEO. Keep under 60 chars.

<body>Everything the user sees goes here. Text, images, buttons — all of it.

Indentation: Professional vs Amateur

Example 2 — Why Indentation Matters

<!-- Amateur: impossible to read, debug, or maintain -->
<html><head><title>Page</title></head><body><h1>Hi</h1><p>Text</p></body></html>

<!-- Professional: 2 spaces per level, one element per line -->
<html>
  <head>
    <title>Page</title>
  </head>
  <body>
    <h1>Hi</h1>
    <p>Text</p>
  </body>
</html>

Both produce identical output. But professional developers always use indentation. Employers and code reviewers will judge your code quality by how it looks.

Viewport is NOT Optional

Over 60% of web traffic is mobile. Without <meta name="viewport"...> your page zooms out on phones making text tiny and unreadable. This one line is the difference between a page that works on mobile and one that doesn't.

Secret Trick: Inspect Any Website

Press F12 on any website to see its HTML structure. This is how real developers study how popular sites like Zomato, Swiggy, or Flipkart are built. Try it right now — open Google and press F12.

Why DOCTYPE?

Before HTML5 there were 3 different versions and browsers rendered pages differently. DOCTYPE told them which rules to follow. HTML5 in 2014 simplified everything to just <!DOCTYPE html>. Short and done.

Prev Next Lesson

Coding Infinite Report Bug Certificate

CIWeb HTML Course • 22 Lessons • Free Forever

🤖 Shiv AI Explains with Analogies

Shiv AI explains this lesson using funny real-life analogies. No code — just vibes and clarity.

Click the Explain tab to generate analogies automatically.

index.html

Live Preview

Write code → click Deep Analyze for instant feedback

Which meta tag makes your page display correctly on mobile?

ExplanationThe viewport meta tag tells mobile browsers how to scale the page. Without it, phones zoom out to show the desktop version, making text tiny and unreadable for 60%+ of your visitors.

Build Challenge

Complete Document Structure

Build a full HTML page with DOCTYPE, html lang, head (charset + viewport + title + description), and body with content.

Requirements (6 to pass)

DOCTYPE

lang attr

charset

viewport

title

body content

solution.html

Preview

Community Wall

Lesson 2

0/500

0/20 lines