How to Create Your First HTML File (Step-by-Step for Beginners)

Tutorialdeep » How to Create Your First HTML File Properly (Step-by-Step Guide)

If you’re starting web development, the first step is to create your first HTML file.

It sounds simple—but many beginners make small mistakes that cause problems like:

File not opening in browser
Blank page showing
Changes not saving

In this guide, I’ll show you how to create your first HTML file properly step-by-step, so it works perfectly from the beginning.

Step 1: Create a New Folder for Your Project

Before writing any code, create a project folder.

Example:

my-first-website

1	my-first-website

Inside this folder, you will store:

HTML file
images
CSS files (later)

👉 This keeps your project organized.

Step 2: Create an HTML File

Now create a new file inside the folder.

Method 1 (Windows)

Right-click → New → Text Document
Rename it to:

index.html

1	index.html

Important:

Make sure it is not:

index.html.txt &#x274c;

1	index.html.txt ❌

👉 Enable “File Extensions” in your system if needed.

Step 3: Write Basic HTML Structure

Open your file in a text editor (Notepad, VS Code, etc.) and add:

<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is my first HTML page.</p>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>My First Page</title>

</head>

<body>

<h1>Hello World</h1>

<p>This is my first HTML page.</p>

</body>

</html>

This is the basic structure of every HTML page.

Step 4: Save the File Properly

Press Ctrl + S
Ensure file name is:

index.html

1	index.html

👉 Always save inside your project folder.

Step 5: Open HTML File in Browser

Now double-click the file.

Or:

Right-click → Open with → Chrome / Edge

You should see:

Hello World
This is my first HTML page.

1 2	Hello World This is my first HTML page.

🎉 Congratulations! Your first HTML file is working.

Step 6: Make Changes and Refresh

Edit your file:

<h1>Welcome to My Website</h1>

1	<h1>Welcome to My Website</h1>

Save the file and refresh the browser:

Press Ctrl + R

👉 This updates your page.

Common Mistakes Beginners Make

1. Wrong File Extension

index.html.txt &#x274c;

1	index.html.txt ❌

✔ Fix:

index.html

1	index.html

2. File Not Saved

You write code but forget to save.

✔ Fix:
Press Ctrl + S

3. Opening Wrong File

Sometimes you edit one file but open another.

✔ Fix:
Check file name and location.

4. Blank Page Issue

If page shows blank:

Check content inside <body>
Check for missing tags
Refresh browser

5. Browser Cache Issue

Sometimes changes don’t appear.

✔ Fix:

Press Ctrl + Shift + R
Use Incognito mode

Pro Tip: Use a Code Editor

Instead of Notepad, use a better editor like:

VS Code
Sublime Text

These tools help with:

syntax highlighting
error detection
faster coding

Basic Folder Structure (Recommended)

As you grow, use this structure:

project-folder
│
├── index.html
├── css
│   └── style.css
└── images

project-folder

│

├── index.html

├── css

│ └── style.css

└── images

This is how real websites are organized.

What to Learn Next?

After creating your first HTML file, you should learn:

HTML headings and paragraphs
Links and images
Lists and tables
Forms

👉 This builds your foundation step-by-step.

Conclusion

Creating your first HTML file is the first step into web development.

It may look simple, but doing it properly helps you avoid many beginner problems later.

Once you understand:

file structure
saving files
browser behavior

You can confidently move to the next level.

FAQ

How do I create an HTML file on my computer?

Create a new file, rename it with .html extension, and write HTML code inside it.

Why is my HTML file not opening correctly?

Check file extension, save the file properly, and ensure it is not .txt.

Which editor is best for HTML beginners?

VS Code is one of the best editors for beginners because it is simple and powerful.

HTML Tutorial

How to Create Your First HTML File Properly (Step-by-Step Guide)