Your First HTML Page
Today you write your first line of code. By the end of this lesson you'll have a real HTML file open in your browser — created entirely by you, from scratch.
🎬 Video coming soon...
What is HTML?
HTML stands for HyperText Markup Language. It is the language that every website in the world is built with. When you visit any page on the internet — Google, YouTube, any news site — your browser is reading HTML and turning it into what you see on screen.
HTML is not a programming language. You don't need to do math, logic, or algorithms. You just write structured text using something called tags, and the browser handles the rest.
Think of it this way: HTML is like the skeleton of a website. It defines what's there — the heading, the paragraph, the image, the link. CSS (which we'll learn on Day 3) is the skin and clothes — it defines how it looks.
The basic structure of every HTML file
Every HTML page in the world starts with the same basic structure. You only need to memorize this once — your code editor will often write it for you automatically.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Website</title>
</head>
<body>
<!-- Your content goes here -->
</body>
</html>
Let's break down what each line does:
<!DOCTYPE html>
This tells the browser "this file is HTML5" — the modern version. It always goes on line 1. You'll never change this line.
<html lang="en">
This opens the HTML document. The lang="en" tells the browser the page is in English. Everything on your page goes inside this tag.
<head>
The head section contains information about the page — not content that the visitor sees. The title of the tab in the browser goes here, along with links to CSS files later.
<body>
Everything inside the body is what the visitor actually sees. All your text, images, links — everything goes here.
Rule to remember: Every tag you open must be closed. <body> opens, </body> closes. Notice the slash / in the closing tag — that's the signal that it's closing.
The essential tags you need today
You don't need to know every HTML tag. Here are the 8 tags that will get you through most of Day 1 — and honestly, most of your early web projects.
| Tag | What it does | Example |
|---|---|---|
| <h1> | Main heading — the biggest title on the page | <h1>Hello</h1> |
| <h2> | Sub-heading — smaller than h1, use for sections | <h2>About me</h2> |
| <p> | Paragraph — for regular body text | <p>I am learning HTML.</p> |
| <strong> | Bold text — makes words stand out | <strong>Important</strong> |
| <em> | Italic text — for emphasis | <em>really</em> |
| <br> | Line break — moves to the next line (no closing tag) | Line one<br>Line two |
| <hr> | Horizontal rule — a divider line (no closing tag) | <hr> |
| <!-- --> | Comment — notes for you, invisible in the browser | <!-- note --> |
Heads up: <br> and <hr> are self-closing — they don't need a closing tag. You'll learn more about these on Day 2 when we cover links and images.
Write your first page
Open VS Code. Create a new file. Name it index.html. Then type — don't copy-paste — every single line of this code:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body>
<h1>Hello, my name is Esdras.</h1>
<p>I am learning to build websites.</p>
<p>This is my <strong>first page</strong> and I built it from scratch.</p>
<hr>
<h2>Why I'm learning HTML</h2>
<p>Because I want to build things <em>by myself.</em></p>
</body>
</html>
Type it, don't paste it. Your hands learning the structure is part of the lesson. You'll remember it 10x better if you type every character yourself today.
Open it in your browser
Save your file (Cmd+S on Mac, Ctrl+S on Windows). Now open your file explorer, find index.html, and double-click it. It will open in your default browser.
You should see your heading, your paragraphs, a horizontal line, and bold/italic text — exactly as you wrote them. That is a real webpage. Your webpage.
Pro tip: Install the Live Server extension in VS Code. It auto-refreshes your browser every time you save. Right-click your file → "Open with Live Server".
Every time you change something in VS Code and save, your browser will update. This is your workflow for the entire course. Get comfortable with it.
Make it yours.
Don't move to Day 2 until you've done all of these. They'll take you 10–15 minutes and they'll lock in everything you just learned.
- Change the
<h1>to use your own name - Add a third
<p>tag with something true about yourself - Add an
<h2>with the title "My Hobbies" - Use
<strong>on at least one word in your page - Change the
<title>and watch the browser tab update - Add a comment using
<!-- -->that only you can see