Every HTML document follows the same basic skeleton — a doctype, an <html> root with a <head> and a <body>. Get this right once and every page you build starts from it.
Complete Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example Page</title>
</head>
<body>
<header>
<h1>Example Website</h1>
</header>
<main>
<p>This is an example HTML document.</p>
</main>
<footer>
<p>© 2026 Example Site</p>
</footer>
</body>
</html>Breaking It Down
| Part | Purpose |
|---|---|
<!DOCTYPE html> | Tells the browser to use standards-compliant HTML5 rendering. See HTML Doctype. |
<html lang="en"> | The root element; lang tells browsers and screen readers what language the page is in. See lang attribute. |
<head> | Metadata — not visible content: charset, viewport, title, links to CSS. See HTML Head. |
<body> | Everything the visitor actually sees. See HTML Body. |
Practical Use Case
This exact skeleton is what every static site generator, framework template, and code editor's HTML boilerplate produces — it's worth being able to type it from memory rather than always relying on a snippet tool.
Common Mistakes
- Forgetting
<meta charset="UTF-8">— special characters (₹, é, emoji) can render as garbled text without it - Omitting the viewport meta tag — the page won't scale correctly on mobile devices, a critical, easily-missed error
- Putting visible content inside
<head>— nothing there is meant to be displayed on the page itself - Nesting block-level structural tags outside of
<body>by mistake
Interview Relevance
Being asked to "write a basic HTML page from scratch" is common in junior frontend interviews — practice this structure until it's automatic, including the meta tags most beginners forget.
Practice Question
Write a complete HTML document for a simple "Contact Us" page with a heading and one paragraph, including proper charset and viewport meta tags.
