Home » How to Set Up Your First HTML Page

How to Set Up Your First HTML Page – Complete Beginner Guide

Introduction

If you’re starting your journey into web development, creating your first HTML page is the perfect first step.

HTML (HyperText Markup Language) is the foundation of every website. Before learning advanced topics, you must understand how to set up and run a basic HTML page.

This guide will walk you through everything step by step—even if you’ve never written code before.

 Start here if you’re new: /html-basics

What Do You Need to Create an HTML Page?

What do you need to create an HTML page? To create an HTML page, you need a text editor to write code and a web browser to display and test your webpage.

Basic Requirements:

  • Text Editor (VS Code, Notepad, etc.)
  • Web Browser (Chrome, Edge, Firefox)
  • Computer

That’s it! No internet or special software needed.

Step-by-Step Guide

Step 1: Open a Text Editor

Choose any editor:

  • VS Code (Recommended)
  • Notepad
  • Notepad++

 Learn more: /html-editors-guide

Step 2: Create a New File

  • Click File → New File
  • Save it as:
index.html

Important: Use .html extension

Step 3: Write Basic HTML Code

Copy and paste this:

<!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>

 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: Save the File

  • Press Ctrl + S
  • Make sure the file is saved as .html

Step 5: Open in Browser

  • Double-click the file
    OR
  • Right-click → Open with browser

 You will see your first webpage!

Understanding the Code

Let’s break it down:

  • <!DOCTYPE html> → Defines HTML5
  • <html> → Root element
  • <head> → Page info
  • <title> → Browser tab name
  • <body> → Visible content

Adding More Content

Try modifying your page:

<h2>Welcome to My Website</h2>
<p>I am learning HTML!</p>
<a href="#">Click Me</a>

Save the file and refresh the browser to see updates.

 HTML changes appear instantly after refresh.

Common Mistakes

Wrong File Extension

 
index.txt (Wrong)
index.html (right)

Not Saving File

Always save before opening in browser.

Missing Tags

 
<h1>Hello
 

Opening File in Editor Instead of Browser

Use browser to view output.

Best Practices

Use Proper Structure

Always include DOCTYPE, head, and body.

Keep Code Clean

  • Use indentation
  • Organize tags properly

Use Meaningful Tags

Use:

  • <h1> for headings
  • <p> for text

Test Regularly

Refresh browser after changes.

Real-World Workflow

Here’s how developers work:

  1. Write HTML in editor
  2. Save file
  3. Open in browser
  4. Test and fix errors
  5. Repeat

 Next step: /html-tags-guide

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

Takeaway

  • HTML is easy to start
  • You only need editor + browser
  • Always save file as .html
  • Browser displays your code
  •  Practice is key

FAQs: First HTML Page

1.How do I create my first HTML page?

Use a text editor, write HTML code, save it as .html, and open it in a browser.

2. Which editor is best for beginners?

VS Code is the best option.

3. Do I need internet to run HTML?

No, HTML works offline.

4. Why is my HTML file not opening?

Check file extension and ensure it’s .html.

5. Can I edit HTML after saving?

Yes, edit the file and refresh the browser.

Scroll to Top