How-To Guide

How to Run Your First HTML File

Create, save, and open an HTML file in your browser in under 5 minutes. No server, no setup, no frameworks — just plain HTML.

🎯 What You'll Build

By the end of this guide, you'll have a working HTML page that looks like this in your browser:

file:///index.html

Hello, World!

This is my first web page.

📋 What You'll Need

A code editor — VS Code is free and recommended
A modern browser — Chrome, Firefox, Safari, or Edge
About 5 minutes

✅ No installation required. No Python, no Node.js, no terminal. HTML runs natively in every browser.

Create a New File

Open VS Code. Create a new file with Ctrl+N (Windows/Linux) or Cmd+N (Mac).

Save it immediately with Ctrl+S or Cmd+S. Name it:

index.html

⚠️ Important: The file must end in .html — not .txt or .htm.txt. If you're on Windows and can't see file extensions, turn on "File name extensions" in File Explorer first.

Write Your First HTML Code

Paste this into your index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first web page.</p>
</body>
</html>

Here's what each line does:

<!DOCTYPE html> — tells the browser this is HTML5
<html> — wraps the entire page
<head> — invisible metadata (title, encoding)
<body> — everything visible on the page
<h1> — a big heading
<p> — a paragraph

Save the File

Press Ctrl+S (Windows/Linux) or Cmd+S (Mac).

If VS Code shows a dot next to the filename, it means unsaved changes exist. Make sure it's saved before continuing.

💡 Enable Auto Save: In VS Code, go to File → Auto Save. From now on, every change saves automatically. You'll never lose work again.

Open It in Your Browser

There are two easy ways:

Method A: Double-click the file

Open your file manager (Explorer on Windows, Finder on Mac)
Find index.html
Double-click it
It opens in your default browser 🎉

Method B: Drag into the browser

Open Chrome, Firefox, Safari, or Edge
Drag index.html from your folder into the browser window
It renders instantly

You should see a big "Hello, World!" heading and a paragraph below it.

💡 Why does the URL say file:///...? That means the browser is reading a file directly from your computer, not from a web server. It works perfectly for local development.

Use Live Server for Auto-Reload (Recommended)

Without Live Server, you have to refresh the browser manually every time you change the file. With Live Server, the page reloads automatically.

Install Live Server:

In VS Code, click the Extensions icon on the left sidebar (or press Ctrl+Shift+X)
Search for Live Server
Click Install on the one by Ritwick Dey (the most popular one, 30M+ downloads)

Use it:

Right-click anywhere inside your index.html file
Click Open with Live Server
Your browser opens with the page at http://127.0.0.1:5500/index.html
Now edit your HTML and save — the browser auto-refreshes

💡 Why this matters: Live Server simulates a real web server environment, so features like JavaScript modules, fetch API, and form submission work correctly — things that don't always work with the file:// protocol.