How-To Guide
How to Write Your First HTML Page
Every website starts here. In 10 minutes, you'll write a complete HTML page from scratch — and understand every line.
🎯 What You'll Build
By the end of this guide, your HTML file will render this in the browser:
Welcome to My Website
This is my very first HTML page. I'm learning to code!
What I'm Learning
HTML structure, headings, and paragraphs.
📋 What You'll Need
- A code editor — VS Code is free and recommended
- A web browser (Chrome, Firefox, Safari, or Edge)
- About 10 minutes
✅ Nothing else. No installs, no accounts, no setup.
🌐 What is HTML, Exactly?
HTML stands for HyperText Markup Language. It's not a programming language — it's a markup language. That means it describes the structure of a page, not the logic.
Think of a webpage like a house:
- HTML is the structure — walls, doors, rooms
- CSS is the decoration — paint, furniture, style
- JavaScript is the electricity — lights, switches, movement
Every website you've ever visited is built on HTML. Once you know it, you can build anything.
Create the File
Open VS Code. Create a new file:
Ctrl + N (Windows/Linux)
Cmd + N (Mac)Save it immediately as:
index.htmlWhy index.html? By convention, index.html is the "homepage" that browsers load by default when you visit a folder.
💡 Tip: When saving, make sure the file extension is .html, not .txt. On Windows, you may need to enable "File name extensions" in Explorer.
Start with the DOCTYPE
The very first line of every HTML file is:
<!DOCTYPE html>This tells the browser: "This is a modern HTML5 page." Without it, browsers fall back to "quirks mode" and render your page unpredictably.
<! — start of a declarationDOCTYPE html — "this is HTML5"> — end of the declaration
Wrap Everything in <html>
After the DOCTYPE, every other element goes inside an <html> element:
<!DOCTYPE html>
<html lang="en">
</html>The lang="en" attribute tells screen readers and search engines that this page is in English. This matters for accessibility and SEO.
<html> and closing tags </html>. The closing tag has a forward slash.
Add the <head> Section
Inside <html>, the first child is <head>. This section holds metadata that isn't visible on the page:
<!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>
</html>Each line does something important:
Tells the browser to use UTF-8 encoding so special characters (é, 日本語, emojis) display correctly.
<meta name="viewport" ...>
Makes the page responsive — tells mobile browsers to scale the page to fit the screen width.
<title>My First Page</title>
The text that appears in the browser tab. Also shown in Google search results.
Add the <body> Section
After </head>, add <body>. This is where all visible content goes:
<!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>Welcome to My Website</h1>
<p>This is my very first HTML page. I'm learning to code!</p>
<h2>What I'm Learning</h2>
<p>HTML structure, headings, and paragraphs.</p>
</body>
</html>The tags inside <body>:
<h2>...</h2> — a sub-heading. Use
<h2> through <h6> for smaller headings.<p>...</p> — a paragraph of text.
Save and View in the Browser
Press Ctrl+S (or Cmd+S) to save. Then:
- Open your file manager (Explorer or Finder)
- Find
index.html - Double-click it
- It opens in your default browser 🎉
You should see your page rendered with a big heading, a paragraph, a sub-heading, and another paragraph.
💡 Want live auto-reload while you edit? Install the Live Server extension in VS Code, then right-click your HTML file → "Open with Live Server". Every save reloads the browser instantly. Full guide here →
📄 Complete Code (Copy-Paste Ready)
Here's the full file. Copy it, paste it, and start modifying:
<!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>Welcome to My Website</h1>
<p>This is my very first HTML page. I'm learning to code!</p>
<h2>What I'm Learning</h2>
<p>HTML structure, headings, and paragraphs.</p>
</body>
</html>✨ Your Challenge
Try modifying the page:
- Change the
<h1>text to your own name - Add a second
<h2>with the title "My Goals" - Add a
<p>describing why you want to learn to code - Add an
<h3>and see how it renders smaller than<h2>
💡 Stuck? Save the file and refresh the browser (F5). If nothing changes, you may need to hard-refresh with Ctrl+Shift+R to clear the cache.
⚠️ Common Beginner Mistakes
❌ Forgetting the closing tag
Every tag needs a closing tag: <h1> must be followed by </h1>. Missing closing tags cause layout chaos.
❌ Using <h1> multiple times
Google uses <h1> to identify the main topic of a page. Use it only once, then use <h2> through <h6> for sub-sections.
❌ Forgetting to save the file
If your changes aren't showing in the browser, you probably didn't save. In VS Code, a dot next to the filename means unsaved changes.
❌ Wrong indentation
Indentation isn't required, but it makes your code readable. Use 2 or 4 spaces consistently. VS Code can auto-format with Shift+Alt+F.
❌ Saving as <code>index.html.txt</code>
Windows hides file extensions. Turn them on in Explorer → View → File name extensions.
🎯 What's Next?
You just wrote your first HTML page. Now learn HTML properly with our free course.