Goal
You’ll be able to write a complete, valid HTML document from memory, and understand what specific job each of the required top-level elements actually does.
Learn
Every real HTML page needs a specific skeleton structure to be valid and to render predictably across browsers:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Page</title> </head> <body> <p>Visible page content goes here.</p> </body> </html>
<!DOCTYPE html> isn’t actually an HTML element — it’s a declaration telling the browser “render this using modern HTML5 rules,” preventing the browser from falling back into an older, inconsistent rendering mode.
<html lang="en"> is the root element wrapping everything else. The lang attribute matters more than beginners usually realize: it tells screen readers which language’s pronunciation rules to use, and helps search engines correctly identify the page’s language.
<head> contains information about the page, not visible content itself: the page title (shown in the browser tab), character encoding, links to CSS files, and meta information (covered in depth in Part 4).
<body> contains everything actually visible on the page — every heading, paragraph, image, and link a visitor sees.
<meta charset="UTF-8"> tells the browser which character encoding to use when interpreting the page’s text. UTF-8 supports virtually every writing system and symbol in common use, which is why it’s the standard default for modern pages.
Decision Task
A page is missing <!DOCTYPE html> entirely. Before reading on: will the page fail to load, or will something subtler happen?
Show Answer
Something subtler — the page will still generally load, but the browser may render it in “quirks mode,” an older compatibility mode with inconsistent, less predictable rendering rules, rather than modern standards mode. This can cause layout and spacing bugs that are genuinely hard to trace back to their real cause.
Common Mistake
Forgetting that <head> content is not visible on the page itself. Beginners sometimes place visible text like a heading directly inside <head>, expecting it to show up on the page — it won’t, since <head> is exclusively for page metadata, not visible content.
Practice Questions
1. What specific problem can occur if <!DOCTYPE html> is missing from a page?
Show Answer
The browser may render the page in an older “quirks mode” with inconsistent, unpredictable rendering rules instead of modern standards mode.
2. Why does the lang attribute on <html> matter for accessibility specifically, not just for search engines?
Show Answer
Screen readers use the lang attribute to select correct pronunciation rules for that language; without it, a screen reader might mispronounce the page’s content using the wrong language’s rules.
3. Is a <title> element part of the visible page content, or part of the page’s metadata?
Show Answer
Metadata — it appears in the browser tab and search results, not as visible content within the page body itself.
4. True or False: multiple <body> elements can exist in one valid HTML document.
Show Answer
False — a valid HTML document has exactly one <body> element, containing all visible content.
5. Why is UTF-8 the standard recommended character encoding for modern web pages?
Show Answer
It supports virtually every writing system and symbol in common global use, avoiding character-display issues across different languages.
Try It Yourself
Without looking back, write out the complete required skeleton of a valid HTML document, including doctype, html/head/body, charset, and title — using “My First Page” as the title.
Show Answer
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>My First Page</title></head><body></body></html> — check that you included all six required pieces: doctype, html with lang, head, charset, title, and body.
Quick Check
1. What does <!DOCTYPE html> actually do?
Show Answer
Tells the browser to render the page using modern HTML5 standards mode, rather than an older compatibility mode.
2. What goes inside <head>: visible content or page metadata?
Show Answer
Page metadata — not visible content.
3. What goes inside <body>?
Show Answer
All visible page content.
4. Why does the lang attribute matter for screen readers specifically?
Show Answer
It tells the screen reader which language’s pronunciation rules to apply when reading the page aloud.
5. What does the charset meta tag control?
Show Answer
Which character encoding the browser uses to correctly interpret and display the page’s text.