Phase 1 — HTML
Lesson 0001 • Beginner

Your First Web Page

Understand what HTML is, write a real HTML file, and see it render in your browser. By the end, you'll have built something you can see and touch.

1. What is HTML?

HTML stands for HyperText Markup Language. It is not a programming language — it's a markup language. That means its job is to describe the structure of content on a web page.

Think of it this way:

Every single website you've ever visited — Google, YouTube, Amazon — is built on HTML at its core. Source: MDN Web Docs

Key Insight

HTML uses tags to mark up content. Tags tell the browser: "This is a heading," "This is a paragraph," "This is a link." The browser reads these tags and renders the page accordingly.

2. Anatomy of an HTML Element

An HTML element is made of three parts:

element-anatomy.html 
<p>Hello, World!</p>
Part What It Is Example
Opening tag Tells the browser "start this element" <p>
Content The actual text or nested elements Hello, World!
Closing tag Tells the browser "end this element" </p>

Some elements are self-closing — they don't have content or a closing tag:

self-closing.html 
<br>     <!-- Line break -->
<img src="photo.jpg">  <!-- Image -->
<hr>     <!-- Horizontal rule -->

3. The HTML Document Structure

Every HTML page follows this exact blueprint. This is non-negotiable — miss any piece and the browser has to guess what you meant. Source: MDN

index.html 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my first web page.</p>
</body>
</html>

Let's break down each line:

Line-by-Line Breakdown

<!DOCTYPE html>
Tells the browser: "This is an HTML5 document." Always the first line.
<html lang="en">
The root element. Everything lives inside it. lang="en" tells the browser the page is in English.
<head>
Metadata zone — things the user doesn't see on the page (title, character set, CSS links).
<meta charset="UTF-8">
Sets character encoding. UTF-8 supports all languages and emoji.
<meta viewport>
Makes the page responsive on mobile devices. Always include this.
<title>
The text shown in the browser tab. Critical for SEO and user experience.
<body>
Everything the user sees on the page goes here — headings, text, images, buttons.
<h1> and <p>
<h1> is a top-level heading. <p> is a paragraph. These are the most basic content elements.
💡 Pro Tip: head vs. body The <head> is for the browser and search engines. The <body> is for the user. If you can see it on screen, it's in the <body>.

4. Common HTML Tags You'll Use Constantly

Tag Purpose Example
<h1> to <h6> Headings (h1 = biggest, h6 = smallest) <h2>About Me</h2>
<p> Paragraph of text <p>I love coding.</p>
<a> Link (anchor) <a href="https://google.com">Google</a>
<img> Image (self-closing) <img src="pic.jpg" alt="A photo">
<ul> / <ol> Unordered / Ordered list <ul><li>Item</li></ul>
<div> Generic container (no meaning) <div>...content...</div>
<span> Inline container (no meaning) <span>highlight</span>
<strong> Bold / important text <strong>Warning!</strong>
<em> Italic / emphasized text <em>really</em> cool

You don't need to memorize all of these now. They'll become second nature as you build. See the HTML Essential Tags Reference for a printable cheat sheet.

Interactive Practice Zone

Test your understanding of the HTML document structure. No guessing — if you're not sure, scroll up and re-read the lesson first.

Question 1: What does HTML stand for?
Question 2: Which section of an HTML document contains things the user SEES on screen?
Question 3: What should always be the FIRST line of an HTML5 document?
Question 4: Which of these is a self-closing tag (no closing tag needed)?
0/4

Quiz Completed!

Retaking this quiz after a break builds long-term memory (storage strength), not just in-the-moment recall.

5. Code Exercise: Fill in the Blanks

Complete the missing parts of this HTML document structure. Type your answers in the blank fields.

<!DOCTYPE >
< >  <!-- metadata section -->
  < >My Page</title>
< >  <!-- visible content -->
  < >Welcome</h1>
  < >Hello there.</p>

6. Build Challenge: Your First Real Page

Theory without practice is wasted time. Do this right now:

  1. Open VS Code (or any text editor).
  2. Create a new file called index.html.
  3. Type the full HTML structure from memory (don't copy-paste — typing forces your brain to recall).
  4. Inside the <body>, write:
    • An <h1> with your name
    • A <p> saying what you want to build
    • A <ul> with 3 technologies you want to learn
  5. Save the file. Double-click it to open in your browser.
  6. Congratulations — you just built a web page.
⚠️ Don't Skip This Step If you only read the lesson but don't build the page, you haven't learned anything. You've just consumed information. The difference between a developer and someone who "knows about coding" is that the developer actually writes code.

Primary Source: For a deeper dive, read the MDN: HTML Basics tutorial — it's the most authoritative HTML resource on the internet.

Have questions about this lesson? Not sure if your HTML file is correct? Ask me! I can review your code and explain anything that's unclear.