🌱BeginnerHTML Foundations
HTML Document Structure
Learn the required skeleton of every HTML document: DOCTYPE, html, head, and body elements.
Overview
Every valid HTML page follows the same skeleton. Understanding this structure is the first step to writing correct HTML that browsers render reliably.
At the top is the DOCTYPE declaration, which tells the browser which version of HTML you are using. In HTML5 (the current standard), this is simply <!DOCTYPE html>.
Next is the root <html> element, which wraps everything else. Inside it sit exactly two children: <head> and <body>. The <head> contains metadata information about the page that is not displayed directly, like its title, character encoding, and links to stylesheets. The <body> contains all the visible content: headings, paragraphs, images, links, and everything a user sees and interacts with.
Key Points
- •<!DOCTYPE html> tells the browser to use HTML5 always put it on line 1
- •<html lang="en"> is the root element; the lang attribute helps screen readers and search engines
- •<head> holds metadata: title, charset, viewport, CSS links nothing visible in the page itself
- •<body> holds all visible content: text, images, links, forms, etc.
- •Indenting child elements by 2 spaces makes HTML readable browsers ignore whitespace
- •<meta charset="UTF-8"> should be the first tag inside <head> to ensure correct text encoding
Examples
The standard HTML5 document skeleton
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
</head>
<body>
<!-- Visible content goes here -->
<h1>Hello, World!</h1>
</body>
</html>This skeleton is the starting point for every HTML page. Memorize it.
What goes in <head> vs <body>
<head>
<!-- Invisible metadata -->
<meta charset="UTF-8">
<title>My Blog</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Everything the user sees -->
<h1>Welcome to My Blog</h1>
<p>Latest posts below...</p>
</body>The lang attribute on <html> matters for accessibility
<!-- English page -->
<html lang="en">
<!-- French page -->
<html lang="fr">
<!-- Japanese page -->
<html lang="ja">Screen readers use lang to pick the right voice/pronunciation.
Common Mistakes
- Putting visible content inside <head> only metadata belongs there
- Forgetting <!DOCTYPE html> this puts browsers into "quirks mode" and breaks layouts
- Missing <meta charset="UTF-8"> characters like é, ñ, or emojis may display as garbled text
- Nesting <head> or <body> inside each other they must be direct siblings inside <html>
Note
Most code editors have an HTML snippet shortcut. In VS Code, type "!" and press Tab to auto-generate the full HTML5 skeleton instantly.
Exercises
Write HTML to solve each exercise. Use Preview to see it render in a live iframe, then mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4