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, written entirely by you, from scratch.
🎬 Video coming soon...
What is HTML?
HTML stands for HyperText Markup Language. Every website in the world is built with it. When you open Google, YouTube or any news site, your browser is reading HTML and turning it into what you see on screen.
HTML isn't a programming language. There's no math and no logic. You write your content and wrap it in tags that tell the browser what each piece is: this is a heading, this is a paragraph, this is a link.
Think of it this way: HTML is the skeleton of a website. It says what's there. CSS (Module 2) is the skin and clothes: how it looks. JavaScript (Module 3) is the muscles: what it does.
Set up your tools
You need two free things: a code editor and a browser. You already have a browser.
- Download VS Code from code.visualstudio.com and install it
- Make a new folder on your computer called
my-site - In VS Code, click File → Open Folder and pick
my-site - Click the new-file icon and name the file
index.html
Why index.html? When someone visits a website, the browser looks for a file called index.html first. It's the front door of every site.
The structure of every HTML page
Every HTML page starts with the same skeleton. Type this into index.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Website</title>
</head>
<body>
<!-- Your content goes here -->
</body>
</html>
<!DOCTYPE html>tells the browser this is modern HTML. It always goes on line 1.<html lang="en">wraps the whole page.lang="en"says it's in English.<head>holds information about the page, like the title in the browser tab. Visitors don't see it on the page.<body>holds everything visitors actually see.
Rule to remember: most tags come in pairs. <body> opens, </body> closes. The slash means "closing". Everything between them is inside that element.
The tags you need today
| Tag | What it does | Example |
|---|---|---|
| <h1> | Main heading, the biggest title on the page | <h1>Hello</h1> |
| <p> | A paragraph of text | <p>I am learning HTML.</p> |
| <strong> | Important text (shows bold) | <strong>Important</strong> |
| <em> | Emphasis (shows italic) | <em>really</em> |
| <br> | Line break. No closing tag | Line one<br>Line two |
| <hr> | A divider line. No closing tag | <hr> |
| <!-- --> | A comment. Invisible on the page | <!-- note --> |
Heads up: <br> and <hr> are empty elements. They have nothing inside them, so they don't need a closing tag.
Write your first page
Replace the comment in your body with real content. Type it, don't paste it. Your hands learning the structure is part of the lesson.
<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>
<p>Why am I learning? Because I want to build things <em>by myself.</em></p>
</body>
</html>
Save with Ctrl+S (Cmd+S on Mac). Then find index.html in your folder and double-click it. It opens in your browser. That's a real web page, and it's yours.
Install Live Server. In VS Code, click the Extensions icon, search Live Server and install it. Then right-click index.html → Open with Live Server. Now the browser refreshes by itself every time you save. You'll use this for the whole course.
Quick quiz
4 questions to check you've got it. Pick an answer to see if you're right.
1Which file does a browser look for first when someone visits a website?
index.html is the front door of every site. Servers load it automatically when someone visits a folder or domain.
2What goes inside the <head>?
The head holds information about the page, like the <title> in the browser tab. Visible content goes in the <body>.
3Which tag does NOT need a closing tag?
<br> is an empty element: it has nothing inside it, so there's nothing to close.
4What does <!-- note --> do?
It's an HTML comment. The browser ignores it, so it's a note for you and other developers.
Make it yours.
Don't move on until you've done all of these. They take 10–15 minutes and lock in everything you just learned.
- Change the
<h1>to your own name - Add a third
<p>with something true about yourself - Use
<strong>and<em>at least once each - Change the
<title>and watch the browser tab update - Add a comment that only you can see
- Delete a closing tag on purpose and see what the browser does