How to Set Up Your First HTML Page (Step-by-Step Guide for Beginners)

Introduction: Why Learning HTML Is the First Step

HTML (HyperText Markup Language) is the foundation of every website.
Before learning CSS or JavaScript, you must understand how to create a basic HTML page.

Setting up your first HTML page helps you:

  • Understand how websites work

  • Learn page structure

  • Start your web development journey confidently

This guide is written in a teacher-style, beginner-friendly way, so you can follow it even if you have no prior coding experience.

What You Need Before Starting

You only need two simple things:

  1. A Text Editor

    • Notepad (Windows)

    • VS Code (Recommended)

    • Sublime Text

    • Atom

  2. A Web Browser

    • Google Chrome

    • Microsoft Edge

    • Firefox

👉 No internet connection or software installation is required to run HTML.

Step 1: Create a New HTML File

  1. Open your text editor

  2. Click New File

  3. Save the file as:

     
     
index.html

⚠️ Important:

  • File extension must be .html

  • Not .txt

Step 2: Understand the Basic HTML Structure

Every HTML page follows a basic structure.

Basic HTML Template

<!DOCTYPE html>
<html>
<head>
  <title>My First HTML Page</title>
</head>
<body>

  <h1>Hello, World!</h1>
  <p>This is my first HTML page.</p>

</body>
</html>

Step 3: Explanation of Each Part (Very Simple)

<!DOCTYPE html>

  • Tells the browser this is an HTML5 document

<html>

  • Root element of the webpage

  • Wraps the entire HTML code

<head>

  • Contains information about the page

  • Not visible to users

  • Includes:

    • Title

    • Meta information

<title>

  • Appears in the browser tab

 
<title>My First HTML Page</title>

<body>

  • Contains all visible content

  • Text, images, links, headings, etc.

<h1>

  • Main heading of the page

<p>

  • Paragraph text

Step 4: Write Your First Content

Inside the <body> tag, write something simple:

 
<h1>Welcome to My Website</h1>
<p>I am learning HTML.</p>

👉 This content will appear on the webpage.

Step 5: Save and Open the HTML File

  1. Save the file

  2. Right-click on index.html

  3. Choose Open with Browser

  4. Select Chrome / Edge / Firefox

🎉 Congratulations!
You’ve just created and opened your first HTML page.

Step 6: Make Small Changes and Refresh

Try changing the text:

<h1>Hello HTML</h1>
<p>This page was created by me.</p>

Save the file and refresh the browser to see updates.

👉 HTML changes appear instantly after refresh.

Optional: Add More HTML Elements

Add a Link

<a href="https://www.google.com">Go to Google</a>

Add an Image

<img src="image.jpg" alt="Sample Image">

Add a Line Break

<br>

Common Beginner Mistakes

  • Saving file as .txt instead of .html
  • Forgetting closing tags
  • Writing HTML inside <head> instead of <body>
  • Not refreshing the browser
  •  Using Word instead of a text editor

Best Practices for Beginners

  • Always use lowercase tags
  • Indent code for readability
  • Use meaningful titles
  •  Save files frequently
  • Practice small changes often

Folder Structure Recommendation

As you grow, use this simple structure:

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

FAQs: First HTML Page

Do I need internet to run HTML?

No, HTML runs locally in your browser.

Which editor is best for beginners?

VS Code is highly recommended.

Why is my HTML page blank?

Check for missing tags or open the correct file.

Can I open HTML on mobile?

Yes, but development is easier on a computer.