🏗️ HTML Document Structure
Before a browser can paint a single word on screen, it needs a blueprint. HTML is that blueprint — the load-bearing skeleton every website is built on. In this lesson you'll learn the exact structure browsers expect, piece by piece, so that every page you write starts from a rock-solid foundation.
Week 1 · Day 2 (Tuesday: HTML Fundamentals) · Lecture 1
🎯 Learning Objectives
By the end of this lesson, you will be able to:
- Write a valid HTML5 boilerplate from memory, in the correct order
- Explain the job of the
DOCTYPE, the root<html>element, and thelangattribute - Distinguish what belongs in the
<head>from what belongs in the<body> - Add the essential meta tags — charset, viewport, and description — and say why each matters
- Describe the anatomy of an HTML element and apply correct nesting rules
- Validate your markup and fix the most common structural mistakes
Estimated Time: 55 minutes
Practice: Hand-build a complete, valid HTML document for a personal homepage.
In This Lesson
What Is HTML?
HTML stands for HyperText Markup Language. It isn't a programming language — there are no variables or loops here. It's a markup language: you wrap your content in tags that tell the browser what each piece means. "This is a heading." "This is a paragraph." "This is a link." The browser reads that meaning and decides how to display it.
A helpful way to picture the three core web technologies is to think of building a person: HTML is the skeleton that gives shape, CSS is the skin and clothes that make it look good, and JavaScript is the brain and muscles that make it move. Get the skeleton right and everything else has something solid to attach to.
Today we focus entirely on the skeleton. Every image, form, and interactive feature you'll build across this bootcamp lives inside the structure you're about to learn.
Anatomy of a Document
Every HTML document follows the same predictable shape — a bit like a formal letter that always has a date, a greeting, a body, and a sign-off. Here is the complete minimal boilerplate. Memorize it; you'll type it more times than you can count.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first web page.</p>
</body>
</html>Notice the two-part split inside <html>: a <head> the visitor never sees directly, and a <body> that holds everything on screen. The diagram below shows how those pieces fit together.
Breaking Down the Skeleton
1. The DOCTYPE declaration
<!DOCTYPE html>Think of this as a label on the very first line telling the browser, "Read the rest of this file as modern HTML5." It isn't an HTML tag and it has no closing partner. Its one job is to switch the browser into standards mode. Leave it off and browsers fall back to a legacy "quirks mode" where spacing and sizing behave inconsistently — a headache you never need to have.
2. The root <html> element
<html lang="en">
<!-- everything else lives in here -->
</html>This is the trunk of the tree — every other element is a branch inside it. The lang="en" attribute declares the page's language. That small addition helps screen readers pick the right pronunciation, tells browsers which translation to offer, and gives search engines a signal about your audience. Always set it.
3. The <head> section
The <head> is the page's control room. Nothing here renders on the page itself; instead it holds metadata and links to resources the page needs to work — the character set, the title shown in the browser tab, links to your stylesheets, and so on.
4. The <body> section
Everything a visitor can actually see and interact with goes in the <body> — headings, text, images, buttons, forms. If the <head> is the control room, the <body> is the rooms of the house where people live.
💡 Head vs. body in one sentence
If a visitor should read or click it, it goes in the <body>. If it's information about the page or a resource the page loads, it goes in the <head>.
Essential Meta Tags
<meta> tags are short instructions for browsers and search engines. Three of them belong on virtually every page you'll ever write.
Character encoding
<meta charset="UTF-8">This tells the browser how to turn the raw bytes of your file into readable characters. UTF-8 covers essentially every language and symbol on Earth — accented letters, Arabic, Japanese, and yes, emoji 🎉. Put it first in the <head> so the browser knows the encoding before it reads any text.
The viewport tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">This is the single most important line for mobile. It tells phones, "Match the page width to the device's actual screen and don't zoom out." Omit it and a phone pretends to be a 980-pixel-wide desktop, shrinking your whole page to unreadable thumbnail size. You'll rely on this line constantly once we reach responsive design.
The description tag
<meta name="description" content="Learn HTML fundamentals with hands-on examples.">Search engines often use this text as the grey summary beneath your page's title in results. Keep it to a single, honest sentence under about 160 characters. It won't change how the page looks, but it changes how many people click through to it.
📖 Meta tags you'll meet later
You don't need these yet, but recognize them when you see them: <meta name="robots"> controls whether search engines index a page, and the og: family (og:title, og:image) powers the rich preview card that appears when someone shares your link on social media.
The Title Element
The <title> is the name on your page's mailbox. It shows up in a surprising number of places, so it's worth getting right.
- The text on the browser tab
- The name saved when someone bookmarks the page
- The blue clickable headline in search results
- The label shown when the link is shared or pinned
<title>HTML Fundamentals | Learn Web Development</title>A few habits make titles pull their weight:
- Keep it under about 60 characters so it isn't truncated
- Make each page's title unique and descriptive
- Lead with the most important words
- Optionally end with a site or brand name after a
|separator
How Elements Work
HTML elements are the LEGO bricks of a page. Each one has a specific purpose and a consistent shape. Most elements look like this:
<tagname attribute="value">Content goes here</tagname>Break that into its four parts and the pattern becomes obvious.
- Opening tag — the tag name in angle brackets, e.g.
<p> - Attribute — extra info as
name="value"pairs, e.g.href="/home" - Content — whatever sits between the tags
- Closing tag — the same name with a leading slash, e.g.
</p>
Self-closing (void) elements
A handful of elements have no content, so they need no closing tag. These are called void elements:
<img src="photo.jpg" alt="A description of the photo">
<br> <!-- a line break -->
<hr> <!-- a horizontal rule -->
<input type="text">
<meta charset="UTF-8">💡 Note: In modern HTML5 you don't need a trailing slash on void elements —<br>is correct. You may still see<br />in older code; both work, so pick one style and be consistent.
Nesting & Hierarchy
Elements live inside other elements, forming a family tree — think Russian nesting dolls, or the folders on your computer. A parent contains children, which can contain children of their own.
<body>
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Article Title</h1>
<p>Article content...</p>
</article>
</main>
</body>That markup produces the tree below. This structure — the browser's mental model of your page — is called the DOM (Document Object Model), and it's exactly what your JavaScript will reach into and manipulate later in the course.
⚠️ Nesting rules that trip up beginners
- Close in reverse order. The last tag you open is the first you close —
<a><strong>text</strong></a>, never<a><strong>text</a></strong>. - Block can't go inside a
<p>. A paragraph can't contain a<div>or another<p>; the browser will silently close the paragraph for you and confuse your layout. - Indent to match nesting. Browsers forgive sloppy indentation, but future-you won't. Indentation is how humans read structure at a glance.
Practice & Quiz
🏋️ Exercise: Build a homepage skeleton
Goal: From a blank file, write a complete, valid HTML5 document for a personal homepage. It should include the DOCTYPE, a lang attribute, all three essential meta tags, a descriptive title, and a body containing one <h1> and one <p>. Add at least one comment labelling a section.
💡 Hint
Start from the boilerplate in the "Anatomy" section. The three essential meta tags are charset, viewport, and description. Remember that charset should come first in the <head>.
✅ Solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="The personal homepage of Sam Rivera, aspiring web developer.">
<title>Sam Rivera | Web Developer</title>
</head>
<body>
<!-- Main greeting -->
<h1>Hi, I'm Sam Rivera</h1>
<p>I'm learning to build for the web, one page at a time.</p>
</body>
</html>Run it through the W3C validator — a clean pass means your skeleton is solid.
🎯 Quick Quiz
Question 1: What is the job of <!DOCTYPE html>?
Question 2: Which element's contents are not shown directly on the page?
Question 3: Without the viewport meta tag, what typically happens on a phone?
Best Practices & Pitfalls
✅ Do
- Start every page with
<!DOCTYPE html>and setlangon<html> - Include
charset,viewport, and adescriptionin every<head> - Give each page a unique, descriptive
<title> - Indent consistently so nesting is obvious at a glance
- Validate with the W3C validator before you call a page done
❌ Don't
- Forget to close container tags, or close them in the wrong order
- Put block-level elements inside a
<p> - Reach for deprecated tags like
<center>or<font>— CSS handles styling - Leave sensitive notes in comments; they're visible in the page source
⚠️ The most common beginner bug
A single missing </div> can push half your page into the wrong container and produce baffling layout glitches. When something looks broken and you can't see why, count your opening and closing tags — or just run the validator, which points straight at the culprit.
Summary
🎉 Key Takeaways
- Every page starts with
<!DOCTYPE html>and a root<html lang="en"> - The
<head>holds metadata and resources; the<body>holds everything visible - Three meta tags belong on nearly every page: charset, viewport, and description
- An element is an opening tag, content, and closing tag — with void elements needing no closing tag
- Elements nest into a tree (the DOM); close them in reverse order and validate your work
📚 Additional Resources
- MDN — Getting started with HTML
- MDN — The document metadata (<head>) element
- W3C Markup Validation Service
🚀 What's Next?
You can now build a valid, well-structured page. Next we go from correct to meaningful: the next lesson introduces semantic HTML elements — tags like <header>, <nav>, <article>, and <figure> that describe what your content is, making it more accessible and easier to maintain.
🎉 Foundation laid!
You've just written the same skeleton that sits underneath every website on the internet. Everything else is built on top of this.
Comments & Validation
Comments
Comments are sticky notes for developers. The browser ignores them completely, so they never appear on the page — they exist purely to help humans understand the code.
Use them to label major sections, leave reminders, or temporarily disable a chunk of markup while you test something. One caution: comments are visible in "View Source," so never put passwords or private notes in them.
Validating your HTML
Validation is proofreading for markup. A validator reads your file and flags anything that breaks the rules — an unclosed tag, a misspelled attribute, an element in the wrong place.
Why bother?
The go-to tool is the free W3C Markup Validation Service. You can paste your code, upload a file, or point it at a URL. Most code editors also have live-validation extensions that underline problems as you type.