You paste this skeleton into every project — here is what each line actually does and what breaks without it.
<!DOCTYPE html> <!-- Without: quirks mode — 90s box model, inconsistent rendering --> <html lang="en"> <!-- lang: screen reader pronunciation + Google language detection --> <head> <meta charset="UTF-8"> <!-- Without: ₹ ₦ é 中 render as garbage. Must be first in head --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Without: mobile renders 980px-wide desktop view, zoomed out. THE mobile line --> <title>Page Title</title> <!-- Tab text + THE clickable headline in Google results --> <link rel="stylesheet" href="style.css"> </head> <body> <script src="app.js" defer></script> <!-- defer: downloads parallel, runs after HTML parsed — no blocking --> </body> </html>
Interview nugget
"Why viewport meta?" — mobile browsers assume desktop sites and simulate a 980px canvas; the tag says "use the real device width". One line, entire mobile experience.
Full course: Your First Page.
← All Articles