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

If you are new to web development, the best place to start is by creating your first HTML page. HTML (HyperText Markup Language) is the foundation of every website. By learning how to set up a simple page, you’ll build the confidence to create more complex projects later.

Let’s go step by step like a classroom exercise.

Create a New File

Open a text editor (Notepad, VS Code, Sublime, etc.).
Save the file as index.html.
- index.html is the default name browsers look for when loading a webpage.

Write the Basic HTML Structure

Every HTML page needs a skeleton structure. Here’s the code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First HTML Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my very first HTML page.</p>
</body>
</html>

Save and Open in Browser

Save the file.
Double-click it → it will open in your default web browser.
You should see:

Hello, World!
This is my very first HTML page.

Explanation of Code

<!DOCTYPE html> → Tells the browser you’re using HTML5.
<html lang="en"> → Root element, with language set to English.
<head> → Contains metadata (title, encoding, viewport settings).
<title> → Appears in the browser tab.
<body> → Visible content of the webpage.
<h1> → A heading (largest size).
<p> → A paragraph of text.

Add More Elements

You can expand your page with more HTML tags. For example:

<body>
  <h1>Welcome to My First Page</h1>
  <p>I am learning HTML step by step.</p>
  <a href="https://www.google.com">Click here to visit Google</a>
  <img src="https://via.placeholder.com/200" alt="Sample Image">
</body>

Now your page has a heading, paragraph, link, and image.

Tips for Beginners

Always close your tags (</p>, </h1>).
Use proper indentation for readability.
Save your file frequently and refresh the browser.
Start small—practice with headings, paragraphs, images, and links.

FAQs

Q1. Do I need special software to write HTML?
No. Any text editor (like Notepad or VS Code) works.

Q2. Why save the file as .html?
Because browsers recognize .html files as web pages.

Q3. Can I test my HTML page without the internet?
Yes. You can open .html files locally in your browser without internet.

Q4. What’s the difference between <head> and <body>?

<head> contains metadata (invisible info like title and SEO).
<body> contains the actual content users see.

Q5. What’s next after HTML basics?
After HTML, you should learn CSS (for styling) and JavaScript (for interactivity)