Webbo3 Frontend Development · Month 1 · Lesson 4
HTML Fundamentals: Your First Real Page
Learn to write a correctly structured HTML document from scratch: doctype, root element, head, body, headings, paragraphs, and comments.
You have a blank file open in your text editor. You want to create a real webpage, but you are not sure where to start. By the end of this lesson, you will take that blank file and turn it into a valid HTML page with a clear structure: doctype, head, body, headings, paragraphs, and comments. You will also know how to spot and fix the most common mistakes beginners make.
What You Need Before Starting
A text editor (VS Code, Sublime Text, or even Notepad) and a web browser. Work along in your own editor as you read — this lesson is written to be typed, not skimmed.
1. The Document Type Declaration
The very first line of every HTML5 document is the doctype. It is not a tag. It is an instruction to the browser that says: render this page in standards mode, not quirks mode.
Always place this on line one, with no spaces before it. If you omit it, older browsers may guess wrong and render your layout inconsistently.
2. The Basic Structure: html, head, and body
Every HTML document has three essential parts. The <html> element is the root. Inside it, <head> holds invisible metadata, and <body> holds everything the user sees.
Common mistake: placing visible content inside <head>. Only metadata belongs there. Text, images, and headings belong in <body>.
3. Heading Hierarchy
Headings create the outline of your page. There are six levels, <h1> through <h6>. Use them for structure, not font size. Screen readers and search engines rely on this hierarchy to understand your content.
A common beginner error is skipping levels for visual effect, for example jumping from <h1> to <h3> because it looks better. That breaks the outline. Use CSS for sizing, not heading levels.
4. Creating Paragraphs
The <p> element defines a paragraph. Browsers automatically add vertical space between paragraphs.
Rule: always close your <p> tags. An unclosed paragraph can swallow every element that follows it.
5. Whitespace and Indentation
Browsers collapse extra spaces, tabs, and line breaks into a single space. These two examples produce identical output:
Indentation is for humans, not browsers. Use two or four spaces per level, and always indent nested tags. Consistent indentation is how you spot missing closing tags instantly.
6. The Invisible but Essential Head Section
The <head> holds metadata. The <title> appears in the browser tab and search results. The <meta charset="UTF-8"> tells the browser how to read special characters like accents and currency symbols.
7. HTML Comments
Comments are notes inside your code that browsers ignore. Use them to explain complex sections or leave reminders for yourself and teammates.
Warning: every <!-- must have a matching -->. A forgotten closing tag can hide large chunks of your page.
🎮 HTML Bug Hunter
Test your eye. Each challenge below shows broken code. Click to reveal the bug and the fix.
✅ Do This Now
Build your first page. Check each box as you complete it.
How to Know You Got It Right
- The browser tab displays your
<title>text. - The page shows your
<h1>as the largest heading. - Each
<h2>sits below the<h1>, with paragraphs under each.
Common Mistakes
- Wrong file extension. Saving as
.txtinstead of.html. Fix: in your editor's Save dialog, choose All Files and typeindex.html. - Unclosed tags. Writing
<p>Hellowithout</p>. Fix: type the closing tag immediately after the opening tag, then fill in the content. - Uppercase tags. Writing
<P>instead of<p>. Fix: HTML5 is lowercase by convention. It still works, but it marks you as a beginner. - Using a word processor. Microsoft Word adds invisible formatting. Fix: use a plain text editor like VS Code, Sublime Text, or Notepad.
Questions Students Ask
-
What is the purpose of the .html extension?
It tells the operating system and browser that the file contains HTML code, so the browser renders it as a webpage instead of displaying raw text. -
How do I view my page in a browser?
Save the file, then double-click it. It will open in your default browser. Alternatively, drag the file into an open browser window. -
Can I use Microsoft Word to write HTML?
No. Word inserts hidden formatting characters and bloated markup. Always use a plain text editor.
Quick recap: Every page starts with <!DOCTYPE html> · <html> wraps everything · <head> holds metadata, <body> holds visible content · Use <h1> to <h6> for hierarchy, not size · Close every <p> · Indent nested tags · Comments use <!-- -->
Using AI to Move Faster
Once you understand the structure, AI becomes a speed tool, not a crutch. Here is how to use it for this lesson.
1. Generate boilerplate instantly.
Instead of typing the skeleton every time, ask Copilot or ChatGPT: "Generate a valid HTML5 boilerplate with lang=en, charset UTF-8, viewport meta, and a title placeholder." Paste it, then modify. You still need to know what every line does, but you do not need to type it from memory.
2. Spot structural errors before the browser does.
Paste your HTML into an AI chat and ask: "Check this HTML for unclosed tags, content inside head, and heading hierarchy skips." It catches what tired eyes miss.
3. Explain unfamiliar code.
When you inherit a project and see tags you do not recognise, paste the snippet and ask: "Explain what this section does and whether it belongs in head or body." This builds pattern recognition faster than searching documentation.
4. Never paste without reading.
AI can hallucinate non-existent tags or outdated attributes. Always trace through the generated code line by line before saving. If you cannot explain what a line does, delete it and ask.
Next lesson: Text, Links, Images and Containers.