Topic 4 · 4 of 43

HTML Document Structure

All in one: every line of the skeleton, side by side

What this example compares

Line one: <!DOCTYPE html> vs <!doctype html> vs no doctype vs the made-up <!DOCTYPE HTML5> (standards mode or quirks mode)
The root and its language: <html> with lang="en" vs "hi" vs "pa"
Character encoding: <meta charset="UTF-8"> vs no charset vs charset="windows-1252"
Phones: no viewport tag vs <meta name="viewport" content="width=device-width, initial-scale=1.0">
Four look-alike names: <title> vs <h1> vs <head> vs <header>
Meta tags: charset alone vs a name + content pair (description, author)
CSS and icons: <link rel="stylesheet"> vs <style> vs <link rel="icon"> vs the clickable <a>
Where the script goes: <script> in the head vs just before </body>
Head or body?: <p>, <img>, <table> with <caption>, <form>, <audio>, <video> and the <header>, <nav>, <main>, <footer> regions
The tree (DOM): html with its two children, head and body

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see a dark banner (the <header> with the <h1> Student Portal) and ten panels. In panel 1 the gold box runs across the frame in the first two cards (standards mode) and is short in the last two (quirks mode). In panel 3 only the first card shows ₹500 नमस्ते correctly; the other two show junk such as â‚¹500. Panel 4 draws two phones: a shrunken, unreadable page on the left and a readable one on the right. In panel 7 card 2 has a green stripe (from the linked CSS) and card 3 an orange one (from <style>). The yellow boxes hold what the browser read from the invisible head. The Console prints script A found: null first (the head script ran before the body existed), then lang: en, charset: UTF-8, the viewport, title, h1, description and author, scriptA: null - no h1 yet, scriptB: found the h1, and the tree: inHtml: head, body, the head's children and inBody: header, main, footer, script. (The head's list starts with one extra script: the Run button's own helper.)

Quick check: in panel 1, why is the gold box short in the card that starts with <!DOCTYPE HTML5>, even though it has a doctype?

Because <!DOCTYPE HTML5> does not exist. The browser does not recognise it, so it treats the page exactly like a page with no doctype and drops into quirks mode. Only <!DOCTYPE html> (in capitals or small letters) gives standards mode.