Why do we need this structure?
Just like a letter has "From", "To", "Date", "Subject" and then "Body" — HTML also has a fixed structure that every browser understands.
The skeleton explained:
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Page Title</title>
7</head>
8<body>
9 <!-- All visible content goes here -->
10</body>
11</html>Line by line explanation:
Line | What it means | Why it's important |
|---|---|---|
<!DOCTYPE html> | "Browser, use HTML5 rules" | Without this, browser uses old buggy mode |
<html lang="en"> | "My page is in English" | Helps Google and screen readers |
<head> | "Settings area" | Nothing here shows on page |
meta charset="UTF-8" | "Support all languages" | Without this, Hindi/Emoji show as boxes |
meta name="viewport" | "Work on mobile phones" | Without this, website looks zoomed out on phone |
<title> | "Browser tab name" | Shows in Google search results |
<body> | "Visible content area" | Everything user sees goes here |
What happens if you forget something?
Missing element | What happens |
|---|---|
<!DOCTYPE html> | Browser uses "quirks mode" - CSS breaks |
meta charset="UTF-8" | Emojis and Hindi show as |
meta name="viewport" | Website looks tiny on mobile phones |
<title> | Browser tab shows "Untitled" |