📄 Lesson 4: Your First Real HTML Page

The HTML you typed in Notepad worked, but it was missing critical structure. Let's learn what a proper HTML document looks like — and why every piece matters.

🎯 Learning Objectives

By the end of this lesson, you will be able to:

Explain what the <!DOCTYPE html> declaration does
Write a complete HTML document with <html>, <head>, and <body>
Use essential <meta> tags for character encoding and viewport
Set a page title with the <title> element
Understand the difference between tags, elements, and attributes

Estimated Time: 45 minutes

Hands-on: You'll create a properly structured HTML page in VS Code.

📑 In This Lesson

What Was Missing from Our Notepad Page

In Lesson 2, you created a file that looked like this:

<h1>Hello, World!</h1>
<p>I just made a web page.</p>

And it worked! The browser showed it just fine. So what's the problem?

The browser is being incredibly forgiving. When it receives HTML that's missing pieces, it fills in the blanks silently. It adds the structure you left out, guesses what you meant, and renders something anyway. This is helpful for viewing pages, but terrible for learning — because you never know what the browser is quietly fixing for you.

A proper HTML document has a specific structure. Think of it like a letter: you could just scribble your message on a napkin and hand it to someone, and they'd probably understand it. But a real letter has a format — an address, a date, a salutation, a body, a closing. HTML has its own format too.

Anatomy of an HTML Document

Here's the complete skeleton of every HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
</head>
<body>
    <!-- Your visible content goes here -->
</body>
</html>

Let's break down every piece:

graph TD A["<!DOCTYPE html>
Tells browser: 'This is HTML5'"] --> B["<html lang='en'>
Root element — wraps everything"] B --> C["<head>
Invisible info for the browser"] B --> D["<body>
Visible content for the user"] C --> E["<meta charset>
Character encoding"] C --> F["<meta viewport>
Mobile scaling"] C --> G["<title>
Browser tab text"] style A fill:#fffbeb,stroke:#f59e0b,stroke-width:2px,color:#1e293b style B fill:#eff6ff,stroke:#3b82f6,stroke-width:2px,color:#1e293b style C fill:#fdf4ff,stroke:#a855f7,stroke-width:2px,color:#1e293b style D fill:#f0fdf4,stroke:#22c55e,stroke-width:2px,color:#1e293b style E fill:#f8fafc,stroke:#64748b,stroke-width:1px,color:#1e293b style F fill:#f8fafc,stroke:#64748b,stroke-width:1px,color:#1e293b style G fill:#f8fafc,stroke:#64748b,stroke-width:1px,color:#1e293b

`<!DOCTYPE html>`

This is a declaration (not a tag) that tells the browser: "This document is written in HTML5." It must be the very first line of every HTML file. Without it, the browser might render your page in a legacy compatibility mode that can cause subtle, hard-to-debug issues.

💡 History Note

Older versions of HTML had long, complicated DOCTYPE declarations. HTML5 simplified it to just <!DOCTYPE html>. That's one of the many reasons HTML5 is great.

`<html lang="en">`

The root element that wraps everything. Every other element goes inside this one. The lang="en" attribute tells the browser (and screen readers) that the page is in English. If your page were in Spanish, you'd use lang="es".

`<head>`

The <head> contains metadata — information about the page that isn't displayed on the screen. This includes the page title, character encoding, links to stylesheets, and other behind-the-scenes configuration.

`<meta charset="UTF-8">`

This tells the browser which character encoding to use. UTF-8 supports virtually every character in every language — letters, accents, emoji, Chinese characters, Arabic script, you name it. Always include this.

`<meta name="viewport" ...>`

This tells mobile browsers how to handle the page width. Without it, mobile browsers may render your page as if it were being viewed on a desktop and then zoom out, making everything tiny. With it, your page will display at the correct width on phones and tablets.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Translation: "Set the page width to match the device width, and start at 1x zoom."

`<title>`

The text inside <title> appears in the browser tab, in bookmarks, and in search engine results. It doesn't appear on the page itself. Every page should have a descriptive, unique title.

`<body>`

Everything that the user actually sees goes inside the <body>. Headings, paragraphs, images, links, forms — all visible content lives here.

Comments

The line  is a comment. Comments are invisible to the user — they're notes for you (the developer). They start with .

Tags, Elements, and Attributes

Before we go further, let's nail down three terms you'll hear constantly:

Elements

An element is the whole thing — opening tag, content, and closing tag together:

<p>This is a paragraph.</p>
 ↑                          ↑
 opening tag      closing tag
 ←— entire element ——————————→

Attributes

An attribute provides extra information about an element. Attributes go inside the opening tag:

<html lang="en">
       ↑     ↑
   attribute  attribute
     name      value

Attributes always follow the pattern: name="value". You've already seen a few:

Attribute	Where You've Seen It	What It Does
`lang="en"`	`<html>`	Sets the page language
`charset="UTF-8"`	`<meta>`	Sets character encoding
`href="..."`	`<a>`	Sets the link destination

Self-Closing Tags

Some elements don't have content, so they don't need a closing tag. These are called void elements or self-closing tags:

<meta charset="UTF-8">     ← no closing tag needed
<img src="photo.jpg">      ← no closing tag needed
<br>                       ← line break, no closing tag
<hr>                       ← horizontal rule, no closing tag

⚠️ A Note on Self-Closing Syntax

You might see some code that writes self-closing tags as <br /> or <meta charset="UTF-8" /> (with a trailing slash). This is valid but optional in HTML5. Both <br> and <br /> work identically. In this course, we'll skip the trailing slash — it's cleaner.

Building Your Page Step by Step

Let's build a proper page in VS Code. Open the index.html file you created in your my-website folder and type the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Website</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is my first properly structured HTML page.</p>
    <p>It has a DOCTYPE, a head section with metadata, and
       a body section with visible content.</p>

    <h2>What I'm Learning</h2>
    <ul>
        <li>HTML structure and tags</li>
        <li>Proper document setup</li>
        <li>How browsers read HTML</li>
    </ul>
</body>
</html>

Save the file and open it with Live Server (right-click → "Open with Live Server"). You should see your page in the browser.

Now notice a few things:

The browser tab says "My First Website" — that comes from the <title> element
The <meta> tags and <head> content are invisible on the page
Only the content inside <body> is displayed

✅ Congratulations!

You've written your first properly structured HTML document. This isn't just something that "happens to work" — it's correct, standards-compliant HTML that any browser in the world will render predictably.

The Emmet Shortcut

Here's a secret: you'll almost never type all that boilerplate by hand. VS Code has a shortcut.

Create a new file (or clear your current one), make sure it's saved with a .html extension, and then:

Type a single exclamation mark: !
Press Tab or Enter when the Emmet suggestion appears

VS Code will generate the complete HTML skeleton for you instantly:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

All you need to do is change the title from "Document" to something meaningful, and start adding content inside <body>. From now on, this is how you'll start every new HTML file.

💡 Remember This Shortcut

! + Tab = complete HTML skeleton. You'll use this at the start of every page you create.

Hands-on Exercise

🏋️ Exercise: Create Your About Page

Objective: Practice creating a properly structured HTML document from scratch.

Instructions:

In your my-website folder in VS Code, create a new file called about.html
Use the Emmet shortcut (! + Tab) to generate the HTML skeleton
Change the <title> to "About Me"
Inside the <body>, add:
- An <h1> heading with your name (or a made-up name)
- A <p> paragraph introducing yourself
- An <h2> subheading like "My Hobbies"
- A <ul> unordered list with at least three hobbies
Save and view with Live Server

💡 Hint

Remember that <ul> wraps the whole list, and each item goes inside a <li> tag. Use the code from this lesson as a reference.

✅ Example Solution

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Me</title>
</head>
<body>
    <h1>Alex Johnson</h1>
    <p>Hi! I'm Alex. I'm learning HTML and CSS
       to build my own website from scratch.</p>

    <h2>My Hobbies</h2>
    <ul>
        <li>Photography</li>
        <li>Hiking</li>
        <li>Playing guitar</li>
        <li>Learning web development</li>
    </ul>
</body>
</html>

🎯 Quick Quiz

Question 1: What does <!DOCTYPE html> do?

Question 2: Where does visible page content go?

Question 3: What's the VS Code shortcut to generate a full HTML skeleton?

Summary

🎉 Key Takeaways

Every HTML document starts with <!DOCTYPE html>
The <html> element wraps everything; use lang to set the language
The <head> holds metadata (title, charset, viewport) — invisible to the user
The <body> holds all visible content
A tag is the code in angle brackets; an element is tag + content + closing tag; an attribute adds extra info to a tag
Use ! + Tab in VS Code to generate the boilerplate instantly

📁 Your Project So Far

my-website/
├── index.html     ← your homepage (built in this lesson)
└── about.html     ← your about page (from the exercise)

🚀 What's Next?

You now know the skeleton of every HTML page. Starting in the next lesson, we'll fill that skeleton with content — beginning with the most fundamental building blocks: text and headings. You'll learn all six heading levels, paragraphs, emphasis, and how to structure text content properly.

Module 1 is complete. Welcome to Module 2: HTML Essentials.